CSS动画的属性Transition与Animation
本文总结css3中两个用来做动画的属性，一个是transition，另一个是animation。
差异比较
| CSS3 | 差异 |
|---|---|
| transition | 在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画。 |
| 常用语鼠标事件（:hover、active、:focus、:click）或键盘输入时触发 | |
| 需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发。 | |
| 只能定义开始状态和结束状态，不能定义中间状态。 | |
| animation | 可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧（@keyframe）的参数。 |
| 网页加载时会直接执行，可以自行控制各阶段动画的变化 |
| 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
GitHub：Animate.css 使用说明
原文链接：CSS的Transition与Animation
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
