内容简介：本文总结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 使用说明
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
第二曲线：跨越“S型曲线”的二次增长
[英]查尔斯·汉迪（Charles Handy） / 苗青 / 机械工业出版社 / 2017-6 / 49.00
S型曲线是每个组织和企业在预测未来时一定会参考的工具，一切事物的发展都逃不开S型曲线（“第一曲线”）。 然而，从公司组织、企业治理、市场的变化，到个人职业发展、社会人际关系以及未来的教育与社会价值，多维度地探讨这个世界需要重新以不同的角度来思考问题，不能够总是停留在“第一曲线”的世界。 如果组织和企业能在第一曲线到达巅峰之前，找到带领企业二次腾飞的“第二曲线”，并且第二曲线必须在第一曲......一起来看看 《第二曲线：跨越“S型曲线”的二次增长》 这本书的介绍吧!
