学习animation属性的笔记

animation 动画

关键帧

@keyframes

box {
animation-name: hd;
animation-duration: 2s
}

@keyframes hd{/*设置关键帧，定义名字，再设置每一帧*/
0%{/*这就是在设置每一帧*/
	background:red
}
50%{
	background: yellow;
}
70%{
	background:blue;
}
80% {
	background: white;
}
100% {/*终点帧，如果不设置，那么系统会自动配置，是元素回到初始状态*/
	background: blue;
}
}

注意： 从一个帧到另一个帧之间的动画过渡是平滑的，但连着所有帧一起看就是“有棱角”的。

同时选择,组合书写

@keyframes hd{

25%, 75% {
border-radius: 50%;
}

}

多个动画使用与时间配置

box {
animation-name: hd, hd2, hd3;/*两个动画都对它起效*/
animation-duration: 2s,4s;/*hd两秒，hd2四秒，hd3两秒*/
}

属性重叠
谁后出现，谁的权重更高

box{
	animation-fill-mode:forwards;/*填充模式*/
	/*forwards 意为以起始帧填充
	backwards 意为以末尾帧填充*/
	animation-delay:4s;/*延迟*/
}

动画属性

可以使用动画的属性：有中间值的，比如形状，大小，边框，透明度

控制动画播放次数

animation-iteration-count:1,2,3
与属性的对应原则与之前的一样
infinite表示无限次

控制动画方向

四种模式，可用于设置动作重心

animation-directon:normal 正常，默认状态0-100
animation-direction:reverse 倒放100-0
animation-direction: alternate 轮回，轮换，动画之间平滑过渡
animation-direction: alternate-reverse alternate的翻转版

延迟动画

animation-delay:3s 等3s再执行

贝塞尔曲线控制动画速率

animation-timing-function 是用于控制动画速率的属性

animation-timing-function:ease全程慢
animation-timing-function:ease-in前面慢，后面变快
animation-timing-function:ease-out
animation-timing-function:ease-in-out
animation-timing-function:linear
自定义贝塞尔曲线
animation-timing-function:cubic-bezier(.075,.82,.165,1)/四个参数自己设置/

步进动画

animation-timing-function:steps(3,start)分三步，开始即出发
animation-timing-function:steps(2,end)分两步，开始不出发
animation-timing-function:step-start
animation-timing-function:step-end

控制动画播放与暂停

animation-play-state: paused动画暂停
animation-play-state: running动画播放

用CSS制作轮播图

动画填充模式

animation-fill-mode: normal 原始状态到原始状态
animation-fill-mode:backwards 起始帧到原始状态
animation-fill-mode: forwards 起始状态到结束帧
animation-fill-mode: both 起始帧到结束帧

动画组合定义语法

animation: hd 2s;
/*动画名称 动画时长*/
animation: hd1 2s 2s;
/*名称 时长 延迟时间*/
animation: hd2 backwards 2s 2s;
/*名称 填充模式 时长 延迟时间*/