代码描述:animation transition。animation与transition区别
标题中的两个属性都可以实现动画效果,某些场景下两者表现几乎一样。 我们知道属性的命名与其功能密切相关,先从两者的名称入手。 (1).animation:具有"动画"和"动画片"的意思,名副其实此属性的确可以定义动画效果。 (2).transition:具有"过渡"的意思,规定属性从一个值过渡的另一个值,虽然也具有动画效果,但是和真正的动画效果效果比太逊色了,因为它只有初始和结束两个状态,所以"过渡"是对其更为恰当的描述。 一.动画状态的区别: animation动画可以通过@keyframes属性对动画进行更为精细的控制,设置多个状态。 但是transition属性则只有两个状态,起始状态与结束状态。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>animation与transition区别</title> <style type="text/css"> div{ width:100px; height:100px; background:red; position:relative; top:100px; animation:theanimation 4s infinite alternate; } @keyframes theanimation{ 0%{left:0px;background:red;} 25%{left:30px;background:blue;} 50%{left:60px;background:yellow;} 75%{left:120px;background:green;} 100%{left:240px;background:red;} } </style> </head> <body> <div></div> </body> </html>
代码分析如下: (1).一次完整的动画时长是4秒。 (2).通过@keyframes属性将动画整个时长分为4份,在各自的时间段对动画进行控制。 (3).也就是说animation动画可以具有多个状态,但是transtion动画只有两个状态,起始状态与结束状态。 二.子属性的数量不同: 两个属性都是复合属性,包含有若干个子属性,但是数目不相同。 当然子属性数量不同会对效果有影响,很容易区分,本文不做更多介绍。 三.触发时机不同: 两个属性的触发时机有很大的不同,animation好比是一个自执行函数,只要定义好,立马生效触发动画。 transition则像是一个事件处理函数(事件监听器),只有它监听的属性值发生改变,动画效果才会生效。 很容易理解,下面再来通过代码实例进行一下演示:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>animation与transition区别</title> <style> #ant{ width:100px; height:100px; background:blue; cursor: pointer; transition:width 2s; } #ant:hover{ width:500px; } </style> </head> <body> <div id="ant"></div> </body> </html>
代码分析如下: (1).通过transition属性监听div元素width属性的变化,动画在两秒内完成。 (2).当鼠标悬浮于div之上的时候,设置width的宽度为500px,宽度的变化此时被transition坚挺到。 (3).于是开始动画效果,宽度会进行平滑的过渡。 但是animation属性并不具有上述监听效果,一旦定义,动画效果立马生效,与width或者height等属性一个道理。 可能有朋友对上述结论有所怀疑,认为下面这种效果也是监听行为,其实只是一种错觉而已,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com.com/" /> <title>animation与transition区别</title> <style> div{ width:100px; height:100px; background:blue; cursor: pointer; } @keyframes theanimation{ from {width: 100px;} to {width: 500px;} } div:hover{ animation:theanimation 2s forwards; } </style> </head> <body> <div></div> </body> </html>
上述代码中,当鼠标悬浮的时候,能够以动画方式设置div的宽度。 貌似与前面的代码功能是一样的,也监听了"某些东西"一样,然而事实并非如此。 首先,它并没有监听属性的变化,第二个鼠标悬浮div的时候,是为div元素定义animation动画。 本文对两个属性的主要区别进行了大致的介绍。
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能