内容简介：本文总结CSS3中两个用来做动画的属性，一个是官网下载：Animate.css
本文总结CSS3中两个用来做动画的属性，一个是 transition
，另一个是 animation
。
差异比较
| CSS3 | 差异 |
|---|---|
transition
|
在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画。 |
常用语鼠标事件（ :hover
、 active
、 :focus
、 :click
）或键盘输入时触发 |
|
| 需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发。 | |
| 只能定义开始状态和结束状态，不能定义中间状态。 | |
animation
|
可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧（ @keyframe
）的参数。 |
| 网页加载时会直接执行，可以自行控制各阶段动画的变化 |
animation
和 transition
最大的不同在于 transition
是当参数改变时触发，而 animation
则是直接就执行，所有动画效果需要明确的指定关键帧的参数。
| CSS3 | 简写顺序 |
|---|---|
transition
|
[ property
名称][ duration
时间][ timing-function
特效][ delay
延迟] |
animation
|
[ name
名称][ duration
时间][ timing-function
特效][ delay
延迟] |
[ iteration-count
次数][ direction
方向][ fill-mode
填充模式][ play-state
播放状态] |
浏览器支持
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 使用说明
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
打造有吸引力的学习型社群
苏平、田士杰、吕守玉 / 机械工业出版社 / 45.00元
本书首先对社群的定位、准备和吸引粉丝方面等做了饶有趣味的介绍，从社群黏度的提升、社群知识的迭代与转化和社群的持续发展等多个角度入手，对学习型社群的运营手段、运营模式、运营规律和运营经验等进行了全方位剖析。从中国培训师沙龙这个公益社群近十年成功运营的经验中，为如何经营好学习型社群总结出了一套系统性的、具有实操价值的方法。并以此为基础，扩展到知识管理、团队管理、内容IP等领域，为有致于社团建设以及优质......一起来看看 《打造有吸引力的学习型社群》 这本书的介绍吧!
