第107天 过渡和动画的区别是什么?
Activity
EragonBubble commentedon Aug 1, 2019
相同:都会让你的页面元素动起来
区别:
过渡 transition
1.需要事件触发,比如hover,focus,checked , js改, @media query
2.一次性的
3.只能定义开始和结束状态,不能定义中间状态
举例:
transition: width 2s;
动画 animation
1.不需要事件触发
2.显示地随着时间的流逝,周期性的改变元素的css属性值。区别于一次性。
3.通过百分比来定义过程中的不同形态,可以很细腻
举例:
原生css实现闪烁的bling bling的效果
不停的bling bling,很有趣的,:)
nowherebutup commentedon Aug 1, 2019
dondonZh commentedon Aug 1, 2019
transition 状态更改触发
animation 可循环触发
LinStan commentedon Aug 1, 2019
transition 是需要事件进行触发的,且只能触发一次。 无法定义中间的状态信息,类似Flash的关键帧,中间的补间动画无法详细定义
animation 无需事件触发,并且可以周期性播放。可定义中间状态。
liuxiaole commentedon Aug 4, 2019
区别: