本文总结CSS3中两个用来做动画的属性,一个是,另一个是
transition
。
animation
差异比较
CSS3 | 差异 |
---|---|
| 在给定的持续时间内平滑地更改属性值(从一个值到另一个值),也就是只需要指定开始与结束的参数,参数改变时就触发动画。 |
常用语鼠标事件( 、 、 、 )或键盘输入时触发 | |
需要事件触发,无法在网页加载时自动发生。一次性,不能重复发生,除非一再触发。 | |
只能定义开始状态和结束状态,不能定义中间状态。 | |
| 可以自行写动画开始、进行间、结束时各阶段的变化,适合用来做较细微的动画表现。需要明确的指定关键帧( )的参数。 |
网页加载时会直接执行,可以自行控制各阶段动画的变化 |
和
animation
最大的不同在于
transition
是当参数改变时触发,而
transition
则是直接就执行,所有动画效果需要明确的指定关键帧的参数。
animation
CSS3 | 简写顺序 |
---|---|
| 名称 特效 |
| 名称 特效 |
次数 填充模式 |
浏览器支持
transition
写法
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
写法
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;
}
}
web前端开发资源Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路
属性 | 值 |
---|---|
| 后的名称 |
时间 | 以秒计算,如 预设值 继承父层 |
特效 | 等速、 、 、 、 、 、 、 、 可上官网取值使用 |
| 以秒计算,如 |
次数 | 预设值为 ,因此填 时,动画跑的次数为 次 无限循环 |
方向 | 、 反向、 先反后正 |
| 使用关键帧最后的值 使用最开始的值 |
播放状态 | 暂停 为预设值 预设值、 继承父层 |
Animation.css
Animation.css
官网下载:Animate.css