CSS基础之动画

动画

1）过渡：需要结合鼠标

动画：网页只要运行动画就可以立即生效。

创建动画的方式：（1）方式一：

from：起点 to：终点

@keyframes 动画的名字{
	from{} 
	to{}
}

(2) 方式二：

@keyframes 动画的名字{
	0%{} 
	100%{}
}

如果一个元素的运动点位只有起点和终点,那么2种方式都可以

但是如果元素的运动点位有多个,那么必须使用百分比的方式,我们在0%和 100%之间可以写很多的百分点的.

使用动画（属性）:

1.动画的名字 animation-name(必须写的)

2.动画的运动时间 animation-duration(必须写的)

3.动画的延迟时间 animation-delay

4.动画的运动曲线 animation-timing-function

5.动画的运动次数 animation-iteration-count 写数字几就是运动几次 infinite无限次 运动

6.动画的运动反向 animation-direction

//normal====正常,从起点运动到终点

//reverse===反转,从终点运动到起点

//alternate===正反交替运动

//alternate-reverse====反正交替

7.动画的播放状态 animation-play-state

running===播放(运动),默认值

paused===暂停

这个效果需要结束鼠标一起使用

简写方式:animation:需要什么写什么.

注意:延迟时间一定要写在运动时间的后面,其他值没有书写顺序.