CSS3animation属性详解（三）

animation-direction

animation-direction属性

检索或设置对象动画在循环中是否反向运动

语法

参数说明

normal：正常方向
reverse：反方向运行
alternate：先正常运行再反方向运行，并持续交替运行
alternate-reverse：先反方向运行再正方向运行，并持续交替运行

animation-fill-mode

animation-fill-mode属性

规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式

语法

参数说明

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>&gt;</div></body>
</html>