css3动画和过度属性怎么样能够区分得很明确

html-css06

css3动画和过度属性怎么样能够区分得很明确,第1张

css3动画:

可以自定义节点改变属性,例如30%,40%....这种节点式定义属性的状态值,相对过度来说,可以把一系列的属性变化按照顺序节点来执行,这就好比把动画封装成了一个“函数”,既可以共用,又可以根据改变html标签元素的class来增加或者删除动画效果,动画最好用在写复杂效果的时候用,或者有定义触发一个事件然后删除动画、增加动画时候用。我做轮换图的时候就是js触发,然后使元素拥有一个class引用,class对应的就是动画,很灵活的控制了动画的执行。

过渡效果

过渡效果顾名思义,只是一个简短的过渡,它只能定义一个状态(css属性)到另一个状态,没有节点,所以做不了太复杂的效果,但是相对效率比较高,能用过渡的就不用css3动画,当然两者都是各有优劣,没有任何一种属性是没有用的,合理才是最重要的!

谢谢采纳!

animation(动画)是可以循环运行的,transition(过渡)只能单次运行;

前者可以主动运行(意思就是网页一打开动画就可以自己自动运行),后者则是被动运行(比如需要鼠标移到元素上才会产生过渡效果);

前者可以利用任何css属性来产生动画,而后者则只能利用可量化的css属性(比如width、height等)来产生过渡效果;

暂时就想到这么多了,有没有其他欢迎大家补充。

其实从名字你就能看到区别了啊,“过渡”就是在两种状态之间产生一系列中间状态,比方说一个元素由小变大,如果是瞬间变化,会给人一种生硬的感觉,而如果在这个过程中添加一个由小逐渐变大的短暂效果,就会变得柔和许多。而“动画”,这个就不用多说了吧,大家都是童年过来的,动画片啊,这怎么能是区区“过渡”所能比拟的呢?