css 动画 day05

Css动画

1.定义动画轨迹
@keyframes 轨迹名称{
from{
//开始位置的样式
}
to{
//结束位置的样式
}
}

@keyframes 轨迹名称{
	0%{}
	50%{}
	60%{}
	100%{}
}

2.元素执行轨迹
div{
animation-name:轨迹名称
}
①动画的速度曲线（ animation-timing-function ）
ü ease
默认值
ü ease-in
先慢后快
ü ease-out
先快后慢
ü ease-in-out
先慢后快再慢
ü linear
线性增长
steps(3) 分几步展示 轮播图常用
②动画持续时间（ animation-duration ）
Infinite 无限循环
Number 几次
③动画延迟（ animation-delay ）
④动画方向（ animation-direction ）
动画运行完是否交替方向或者是重置起点。
ü normal
默认值，正常播放
ü reverse
播放帧的顺序反转，播放的起点为帧的结束
ü alternate
播放帧的顺序交替反转，即第一次播放从帧的开始播放到帧的结束，第二次播
放就从帧的结束播放到帧的开始，与此同时，速度曲线也交替反转。反转时
ease-in交替为ease-out
ü alternate-reverse
与alternate类似，不过第一次播放时候需要反转
⑤填充模式（ animation-fill-mode ）
指定了CSS动画在执行前和执行后如何将样式应用到它的目标上。
ü none 默认值
ü forwards 目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值
ü backwards目标将保留在执行期间所遇到的第一个关键帧所设置的计算值
3.transition:过渡属性

	transition
		-property：width height/all
		-duration：
		-timing-function
		-delay：

分别表示过渡属性，持续时间，时间曲线，过渡延迟
4.transform: 变形
rotate(deg)旋转

	skew(deg)倾斜

	scale() 缩放