CSS3animation属性详解（三）
CSS3animation属性详解（三）
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>
上一篇： MySQL数据库中DELIMITER修改结束符教程及应用实例
下一篇： webpack多页面开发实践