箭头弹跳动画鼠标移出问题

# 具体遇到的问题
鼠标移入箭头弹跳的时候，一移出动画会突然停止，元素突然回到原位，很突兀，怎么让它鼠标移出，执行到一半的动画把此次动画执行完，回到原位，不要突然变回原位。

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示

weixin_慕码人7523200 2020-11-23

源自：“仿穷游”首页静态项目 3-8 过渡和变形在实战中的应用（1）

15

收起

2回答

好帮手慕久久 2020-11-23 13:32:44

同学你好，因为二者css底层实现不同，所以展现出来的效果不一样。transition是过渡，即从一个状态过渡到另一个状态，所以鼠标移出时，它也能过渡到原状态。而keyframes是关键帧动画，它就像电影一样，是一个个画面组成的，所以鼠标移出时，直接就还原了。

祝学习愉快！

好帮手慕久久 2020-11-23 11:07:47

同学你好，css3的@keyframes动画，没有提供相关属性或方法，所以老师没有好的办法帮同学实现需求。实际开发中，只要实现这样的动画就可以了，如果想要更复杂的动画，需要借助别的技术来实现，比如canvas、js等，如果需要使用复杂的动画，则可以找一些现成的插件来使用。

祝学习愉快！

提问者 weixin_慕码人7523200 #1

像设置过渡的时候，鼠标移出，那个元素也会以过渡的方式回到原位呀，为啥设置动画鼠标移出的时候就突然回到原位

2020-11-23 11:21:05

相似问题

为什么老师说箭头函数没法清

为什么鼠标移上去还没移走就触发了onmouseout事件颜色就变绿了，不是应该鼠标移出才变色的吗

只有鼠标移动或按键盘时图片才会刷新。只要不动键盘和鼠标就一直时一张图片。这个时哪里的问题，

鼠标移到左右两边是正常速度但是移到上面按钮就会出现一次型做2次减法

老师，我的项目放在wampserver下运行，下拉箭头找不到图片

登录后可查看更多问答，登录/注册

前端工程师2020

参与学习人
提交作业 7880 份
解答问题 15282 个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

本课精华内容

问答作业

老师，我在xhr.send()出错了

93 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载