animation 和 transition 的区别

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了animation 和 transition 的区别，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1116字，纯文字阅读大概需要2分钟。

内容图文

Transition 提供了从一种状态过渡到另一种状态的改变。

Animation 则可以从不同关键帧（@keyframes）上设置多个过渡点。

Transition

• 关注的是元素指定css属性的变化
• 只有开始和结束两个状态
• 动效的出发主要由hover或js触发，无法加载时触发
• 动画是一次性的，除非再次去触发

 

常用属性  
/** 指定过渡元素的属性 all监听所有属性的变化 */
transition-property: width;  
/** 动画的耗时 */
transition-duration: .8s;
/** 动画过渡方式 */
transition-timing-function: ease;
/** 延时执行 */
transition-delay: .5s;

Animation

• 重点在于动画的流程和控制
• @keyframes关键帧能精细化处理过渡过程的每一个动画效果，每个过程可以看做是一次transition的过程
• 类似播放器效果的动画属性能控制动画的播放、暂停、播放时长、播放顺序和循环次数等，能完成更丰富的动画效果
• 在页面加载时会触发

常用属性：
animation-name：keyframes中定义的动画名称；

animation-duration：动画执行一次持续的时长；

animation-timing-function：动画速率变化函数；

animation-delay：动画延迟执行的时间；

animation-iteration-count：动画执行的次数，可以是数字，或者关键字（infinate）;

animation-direction：alternate(奇数次超前运行，偶数次后退运行)。

animation-fill-mode：告诉浏览器将元素的格式保持为动画结束时候的样子。

 

内容总结

以上是互联网集市为您收集整理的animation 和 transition 的区别全部内容，希望文章能够帮你解决animation 和 transition 的区别所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---