css3动画全属性 |css div和box

元素选择器{
animation-name:动画名称;
animation-duration:动画执行时间;
animation-timing-function:动画速度曲线;
animation-delay:动画延迟时间;
animation-iteration-count:动画执行次数;
animation-direction:动画执行方向;
animation-fill-mode:动画结束后状态;
animation-play-state:动画播放状态;
}

1. animation-name

指定应用于选择器的动画名称。CSS3动画中必须要定义动画名称，具体可自定义命名，用于标识页面中的动画元素：

选择器{
	animation-name: my-animation;
}

2. animation-duration

定义动画的执行时间，单位为秒或毫秒：

选择器{
	animation-duration: 3s;
}

3. animation-timing-function

定义动画速度曲线，常见速度函数有：linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速），也可以使用贝塞尔曲线来定义其他自定义缓动：

选择器{
	animation-timing-function: ease-in-out;
}

4. animation-delay

定义动画延迟时间，让动画在指定时间后再开始执行，单位为秒或毫秒:

选择器{
	animation-delay: 2s;
}

5. animation-iteration-count

定义动画的执行次数，可以指定具体次数，也可以使用infinite设置无限执行：

选择器{
	animation-iteration-count: 3;
}

6. animation-direction

定义动画的执行方向，包括normal（正常方向）、reverse（反向执行）、alternate（正反交替执行）、alternate-reverse（反正交替执行）：

选择器{
	animation-direction: alternate;
}

7. animation-fill-mode

定义动画的结束状态，包括none（动画结束后返回起始状态）、forwards（动画结束后停留在结束状态）、backwards（动画延迟执行至起始状态）、both（动画延迟执行至起始状态并在结束状态停留）：

选择器{
	animation-fill-mode: forwards;
}

8. animation-play-state

定义动画的播放状态，包括paused（暂停）和running（播放）：

选择器{
	animation-play-state: paused;
}

总结：

CSS3动画的全属性可以让大家在网页设计中轻松实现多种动画效果，如轮播图、弹窗动画、加载动画等，提高了网站的互动性和美观性。掌握CSS3动画的全属性，便于大家在实际项目中灵活地运用各种动画特效，让网页设计更具创意和趣味性。