欢迎来到计算机相关教程网!

CSS

当前位置: 主页 > 网页制作 > CSS

css3中的animation和transition的不同点是?

时间:2022-09-30 17:44:03|栏目:CSS|点击:

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中的inherit用法详解

栏    目:CSS

下一篇:css中,vmin和vmax的用法。

本文标题:css3中的animation和transition的不同点是?

本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=250

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:8044517 | 邮箱:8044517@qq.com

Copyright © 2022-2025 计算机相关教程网 版权所有冀ICP备17010187号