强大的CSS动画:Transition与Animation

原创 高志飞 教程 css 97阅读 2019-05-15 15:17:42 举报

本文总结CSS3中两个用来做动画的属性,一个是transition,另一个是animation

差异比较

CSS3差异
transition在给定的持续时间内平滑地更改属性值(从一个值到另一个值),也就是只需要指定开始与结束的参数,参数改变时就触发动画。
常用语鼠标事件(:hoveractive:focus:click)或键盘输入时触发
需要事件触发,无法在网页加载时自动发生。一次性,不能重复发生,除非一再触发。
只能定义开始状态和结束状态,不能定义中间状态。
animation可以自行写动画开始、进行间、结束时各阶段的变化,适合用来做较细微的动画表现。需要明确的指定关键帧(@keyframe)的参数。
网页加载时会直接执行,可以自行控制各阶段动画的变化

animationtransition最大的不同在于transition是当参数改变时触发,而animation则是直接就执行,所有动画效果需要明确的指定关键帧的参数。

CSS3简写顺序
transitionproperty名称timing-function特效
animationname名称timing-function特效
iteration-count次数fill-mode填充模式

浏览器支持

transition写法

animation写法

属性
animation-name@keyframes后的名称
animation-duration时间time以秒计算,如3s initial预设值inherit继承父层
animation-timing-function特效linear等速、easeease-inease-outease-in-outstep-startstep-endsteps(int,start/end)cubic-bezier(n,n,n,n)可上官网取值使用
animation-delay以秒计算,如2s
animation-iteration-count次数number预设值为1,因此填2时,动画跑的次数为1+2=3infinite无限循环
animation-direction方向normalreverse反向、alternate先反后正
animation-fill-modeforwards使用关键帧最后的值backwards使用最开始的值both
animation-play-state播放状态pause暂停running为预设值initial预设值、inherit继承父层

Animation.css

官网下载:Animate.css

自己是一个五年的前端工程师,希望本文对你有帮助!

这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复