本文总结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博客 ” ，链接：https://blog.itpub.net/69901074/viewspace-2644857/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
强大的CSS：颜色、背景和剪切
请登录后发表评论
登录
全部评论
