本文总结CSS3中两个用来做动画的属性,一个是
transition
,另一个是animation
。
差异比较
CSS3 | 差异 |
---|---|
transition | 在给定的持续时间内平滑地更改属性值(从一个值到另一个值),也就是只需要指定开始与结束的参数,参数改变时就触发动画。 |
| 常用语鼠标事件( :hover 、 active 、 :focus 、 :click )或键盘输入时触发 |
| 需要事件触发,无法在网页加载时自动发生。一次性,不能重复发生,除非一再触发。 |
| 只能定义开始状态和结束状态,不能定义中间状态。 |
animation | 可以自行写动画开始、进行间、结束时各阶段的变化,适合用来做较细微的动画表现。需要明确的指定关键帧( @keyframe )的参数。 |
| 网页加载时会直接执行,可以自行控制各阶段动画的变化 |
animation
和transition
最大的不同在于transition
是当参数改变时触发,而animation
则是直接就执行,所有动画效果需要明确的指定关键帧的参数。
CSS3 | 简写顺序 |
---|---|
transition | property 名称 timing-function 特效 |
animation | name 名称 timing-function 特效 |
| iteration-count 次数 fill-mode 填充模式 |
浏览器支持
transition
写法
.box { width: 100px; height: 100px; background-color: purple; transition: width 2s ease-in 2s; } .box:hover { width: 200px; height: 200px; background-color: red; }
animation
写法
.box { width: 100px; height: 100px; border: 1px solid #ccc; animation: change 5s; /*8个属性中至少要有名称、时间*/ } /*设定开始与结束状态*/ /*from 就是0%,to 就是100%*/ @keyframes change { from { background-color: #4BC0C8; } to { background-color: #C779D0; } }
.box { width: 100px; height: 100px; border: 1px solid #ccc; animation: change 5s; /*8个属性中至少要有名称、时间*/ } /*设定开始与结束状态*/ /*from 就是0%,to 就是100%*/ @keyframes change { 0% { background-color: #4BC0C8; } 20% { background-color: #C779D0; } 60% { background-color: #FEAC5E; } 80% { background-color: #185a9d; } 100% { background-color: #4BC0C8; } }
属性 | 值 |
---|---|
animation-name | @keyframes 后的名称 |
animation-duration 时间 | time 以秒计算,如 3s initial 预设值 inherit 继承父层 |
animation-timing-function 特效 | linear 等速、 ease 、 ease-in 、 ease-out 、 ease-in-out 、 step-start 、 step-end 、 steps(int,start/end) 、 cubic-bezier(n,n,n,n) 可上官网取值使用 |
animation-delay | 以秒计算,如 2s |
animation-iteration-count 次数 | number 预设值为 1 ,因此填 2 时,动画跑的次数为 1+2=3 次 infinite 无限循环 |
animation-direction 方向 | normal 、 reverse 反向、 alternate 先反后正 |
animation-fill-mode | forwards 使用关键帧最后的值 backwards 使用最开始的值 both |
animation-play-state 播放状态 | pause 暂停 running 为预设值 initial 预设值、 inherit 继承父层 |
Animation.css
官网下载: Animate.css
自己是一个五年的前端工程师,希望本文对你有帮助!
这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69901074/viewspace-2644857/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/69901074/viewspace-2644857/