码迷,mamicode.com
首页 > 其他好文 > 详细

transition和animation的区别

时间:2020-06-19 21:14:04      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:场景   复杂   元素   style   animation   循环   UNC   ima   anim   

CSS3中过渡和动画的区别和各自适用场景?

区别:

1)语法:

过渡——transition: 属性名 完成时间 速度曲线 延迟时间;

     动画——animation: 自定义名称 完成时间 速度曲线 播放次数 奇偶顺序 延迟时间;

@keyframes 自定名称{}  需要先定义关键帧,再通过animation属性引用关键帧

2)触发:

过渡:需要借助伪类、js@media触发。常见的伪类是:hover :focus;常见的js就比如click事件;@media可以用于页面缩小到1000px你可以展示你需要的动画。

动画:自动触发

3)执行次数

过渡:执行一次后不会执行,但是可以借助transitionEnd事件添加循环;

动画:可以通过animation-iteration-count属性设置循环次数;

4)复杂度

过渡:简单动画效果,可以通过transition-timing-function属性展示动画的速度效果

动画:复杂动画效果,可以定义关键帧,控制每一帧的动画效果

适用场景:

transition:适用于当元素从一种样式变换为另一种样式时为元素添加效果

animation:可以在网页中取代动画图片、Flash及需要灵活定制多个帧以及循环的动画中

transition和animation的区别

标签:场景   复杂   元素   style   animation   循环   UNC   ima   anim   

原文地址:https://www.cnblogs.com/qiankun215/p/13166106.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!