动画和过度的区别：
- 过度只能从一个状态到另一个状态，无法控制更加精细的过程。
- 过度必须有触发事件，动画可以没有。
- 过度变化没有次数，动画可以指定次数。
动画使用过程
- 定义动画。通过@keyframes关键帧。
- 在指定元素中，调用动画。通过anmiation属性来调用。
【注意】使用动画可以设置多个属性的变化过程。前提是这些属性是数值型的。
动画属性：
1.animation-name 动画名
- 指定要调用的动画，属性值为动画名（必填）。
2.animation-duration 一次动画完成的时间
- 一次动画完成的时间，属性值为数值，单位为s（秒）。
3.animation-iteration-count 动画执行的次数
- 动画执行的次数，默认是一次，属性值为数值，不需要单位，infinite指无限循环播放。
4.animation-timing-function 动画执行的运动曲线
- linear：线性匀速。
- ease：先加速再减速（默认）。
- ease-in：加速。
- ease-out：减速。
ease-in-out：先加速再减速。
5.animation-direction 运动方向
- normal：正常，从初始帧到结束帧。
- reverse：从结束帧到开始帧。
- alternate：交替。第一次从初始帧到结束帧，第二次从结束帧到初始帧。
- alternate-reverse：反向交替。第一次从结束帧到初始帧，第二次从初始帧到结束帧。
6.animation-dalay 动画延迟的时间
- 动画延迟的时间。单位为s或者ms。
- 只会在动画第一次执行时生效。
7.animation-fill-mode 动画填充的方式
- backwards:在有延迟的情况下，让0%在延迟时间内就生效。
- forwards:在动画结束后，让元素保持结束帧状态。
- both：backwards和forwards都生效。
例：
<style>
.box{
width: 200px;
height: 100px;
background-color: #e74c3c;
/* 指定要调用的动画，属性值为动画名（必填） */
animation-name: dh2;
/* 一次动画完成的时间（必填） */
animation-duration: 2s;
/* 动画执行的次数 默认是一次， 属性值为数字，不需要单位， infinite 无限循环播放。 */
animation-iteration-count: 1;
/* 动画执行的运动曲线
linear：线性匀速
ease：先加速后减速（默认）
ease-in:加速
ease-out：减速
ease-in-out：先加速后减速。
*/
animation-timing-function: linear;
/* 运动方向
normal:正常，从初始帧到结束帧
reverse：从结束帧到开始帧
alternate:交替 第一次从初始帧到结束帧，第二次从结束帧到初始帧。
alternate-reverse:反向交替 第一次从结束帧到初始帧，第二次从初始帧到结束帧。
*/
animation-direction:alternate;
/* 动画延迟时间 单位为s或者ms
只会在动画第一次执行时生效。
*/
animation-delay: 2s;
/* 动画的填充方式:
backwards:在有延迟的情况下，让0%在延迟时间内就生效。
forwards:在动画结束后，让元素保持结束帧状态。
both：backwards和forwards都生效。
*/
animation-fill-mode: both;
}
.box:hover{
width: 800px;
}
@keyframes dh {
/* 初始帧 */
from{
width: 400px;
}
/* 结束帧 */
to{
width: 800px;
}
}
@keyframes dh2 {
0%{
width: 200px;
background-color: #e74c3c;
}
25%{
width: 600px;
background-color: #27ae60;
}
50%{
width: 400px;
background-color: #16a085;
}
75%{
width: 600px;
background-color: #f1c40f;
}
100%{
width: 800px;
background-color: #8e44ad;
}
</style>
<body>
<div class="box"></div>
</body>
扫一扫
2095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
