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

首页课程实战体系课手记专栏慕课教程

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

来源：3-8 过渡和变形在实战中的应用（1）

weixin_慕码人7523200

2020-11-23 00:14:14

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

# 报错信息的截图

# 相关课程内容截图

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

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

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

写回答

2回答

好帮手慕久久

2020-11-23

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

祝学习愉快！

好帮手慕久久

2020-11-23

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

祝学习愉快！

heixin_慕码人7523200

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

h020-11-23

共1条回复

0 学习 · 15276 问题

相似问题

回答 1

回答 2

回答 1

回答 1

回答 1