animation-direction
animation-direction属性
检索或设置对象动画在循环中是否反向运动
语法
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
参数说明
normal：正常方向
reverse：反方向运行
alternate：先正常运行再反方向运行，并持续交替运行
alternate-reverse：先反方向运行再正方向运行，并持续交替运行
animation-fill-mode
animation-fill-mode属性
规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式
语法
animation-fill-mode: none | forwards | backwards | both | initial | inherit;
参数说明
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为结束或开始的状态
animation-play-state
animation-play-state属性
指定动画是否正在运行或已停止
语法
animation-play-state: paused | running;
参数说明
paused：指定暂停动画
running：默认值，指定正在运行的动画
animation
animation属性
复合属性。检索或设置对象所在应用的动画特效
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
编程练习
我们平时可以见到有一些滚屏网页都有一个提示滚屏箭头动画效果，比如当我们打开这样一个网页的时候，网页底部就会有一个向下的箭头来回移动提醒我们下滑屏幕。那么我们也来尝试一下吧。
任务
创建一个div，用CSS控制其大小、字体，输入“>”并翻转90°让其向下，控制位置为网页底部居中
创建向下移动动画关键帧
设置动画为无限循环，并且开始动画前延迟 .5s
任务提示
animation-iteration-count: infinite | <number>;
<number>为数字，其默认值为“1”；infinite为无限次数循环。
animation-direction: normal | reverse | alternate | alternate-reverse;
normal：正常方向；
reverse：反方向运行；
alternate：先正常运行再反方向运行，并持续交替运行；
alternate-reverse：先反方向运行再正方向运行，并持续交替运行。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS3animation属性详解（三）</title><style type="text/css">div{font-family: arial;font-size: 72px;font-weight: bold;position: fixed;right: 0;left: 0;bottom: 20px;width: 30px;height: 30px;margin: auto;transform: rotate(90deg);animation: gt 1s linear .5s infinite alternate;}@keyframes gt{from{bottom: 20px;}to{bottom: 50px;}}</style></head><body><div>></div></body></html>
