css3中的animation和transition的不同点是?
CSS的transition只有两个状态:开始状态 和 结束状态;但animation可能是多个状态,有帧的概念
CSS的transition需要借助别的方式来触发,比如CSS的状态选择器(如:hover)或 借助JavaScript来触发;animation可以自动触发
CSS transition 和 animation 虽然实现动效方式不同,但他们之间有些概念是相同的。比如他们都有“持续时间”、“延迟时间” 和“时间缓动函数”等概念,这些都是用来控制动效的效果。
另外, CSS 的 animation 是离不开 @keyframes 的,换句话说,我们需要先使用 @keyframes 来注册一个动画效果,即帧来描述动画效果。当然,只注册也不见得有效果,还是需要使用 animation-name 属性引用 @keyframes 注册好的动画效果。
除此之外, animation 控制动效上要比 transition 强,因为它具备一些控制动效的属性,比如“播放次数”、“播放方向”、“播放状态”等。
CSS transition 强调的是单一动画属性的过度效果,其过程是简单的,由开始到结束的过程,中间不存在可能的动画转折,只有0到1,比喻:渐隐,渐显;
CSS animation 强调的是多种动画属性的结合,按时间轴线出现周折性动画变换的动画过程,其过程是复杂的,由开始——>结束的过程中,存在可能的动画转折,其过程可能是开始—0—1—2—3>结束的过程。
栏 目:CSS
本文标题:css3中的animation和transition的不同点是?
本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=250
您可能感兴趣的文章
- 05-13精灵图
- 05-13flex布局
- 05-05css盒子模型详解
- 05-05flex布局中,align-content和align-items居中的区别
- 10-13flex中的align-content和align-items的区别
- 10-13animation steps属性的解释说明
- 10-06perspective用在父元素和子元素上的区别
- 10-06perspective和perspective-3d的区别详解
- 10-06transform-origin详解
- 10-05css中,vmin和vmax的用法。


阅读排行
推荐教程
- 10-06transform-origin详解
- 09-11animation打字效果案例
- 09-04css如何实现文字分散对齐
- 10-13flex中的align-content和align-items的区别
- 05-05css盒子模型详解
- 08-13网页常用配色方案
- 10-06perspective用在父元素和子元素上的区别
- 09-15css中的inherit用法详解
- 09-11animation地图案例
- 10-05css中,vmin和vmax的用法。