1. 定义动画帧
@keyframes 动画名{
from {
// 开始帧
}
to {
// 结束帧
}
}
@keyframes 动画名{
0% {
// 开始帧
}
20% {
}
...
100% {
// 结束帧
}
}
2. 设定动画(贺卡)
animation-name: move;
动画名
animation-duration: 2s;
持续时间
animation-timing-function: linear;
时间曲线函数(自由落体,贝塞尔曲线)
animation-fill-mode:forwards;
填充模式,动画结束后保留哪一帧规则
animation-iteration-count: 2;
动画迭代次数 infinite
animation-direction: alternate-reverse;
动画执行的方向 from->to , to->from
animation-play-state: paused;
动画状态
animation-delay: 1s;
延迟时间
animation: move 2s 1s 2 linear;
动画的速写形式
2) 案例(呼吸灯)
3) 案例(梦幻西游)
2. 动画库 animate.css
动画帧、动画设定规则都有第三方完成,我们直接使用class即可
1) 引入动画库
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css">
2) 使用
1. 直接调用动画设定类
<div class="box animate__animated animate__infinite animate__bounce"></div>
2. 引用关键帧
<style>
.bounce {
animation: flash 10s linear infinite;
}
</style>
<div class="box bounce"></div>
3. 过渡
过渡是轻量级的动画,过渡中无需定义关键帧,它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上(状态发生变化的时候)
transition-property: width;
过渡属性,取值可以为多个,多个值通过逗号分割;关键字:all 所有属性
transition-duration: 2s;
过渡持续时间
transition-delay: 0;
过渡延迟时间
transition-timing-function: linear;
时间曲线函数
transition:transform,background-color 2s,2s 0s linear;
速写形式
4. 变形
transform:变形函数
1. 缩放
scale(2)
2. 平移
translate(100px,50px)
3. 旋转
rotate(360deg)
4. 拉伸
skew(45deg)