内容简介：本文总结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 使用说明
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
穿越计算机的迷雾
李忠 / 电子工业出版社 / 2011-1 / 36.00元
《穿越计算机的迷雾》从最基本的电学知识开始，带领读者一步一步、从无到有地制造一台能全自动工作的计算机。在这个过程中，读者可以学习到大量有趣的电学、数学和逻辑学知识，了解到它们是如何为电子计算机的产生创造条件，并促使它不断向着更快、更小、更强的方向发展。通过阅读《穿越计算机的迷雾》，读者可以很容易地理解自动计算实际上是如何发生的，而现代的计算机又是怎么工作的。以此为基础，在《穿越计算机的迷雾》的后面......一起来看看 《穿越计算机的迷雾》 这本书的介绍吧!
