动画属性：
- animation-delay 定义动画开始的时间。
- animation-direction 将动画设置为在备用循环中反向播放。
- animation-duration 定义动画完成一个循环所需的时间长度。
- animation-iteration-count 定义动画循环在停止之前应播放的次数。
- animation-name 指定@keyframes 规则的名称。
- animation-play-state 确定动画是在运行还是暂停。默认为“running”
- animation-timing-function 描述动画在一个周期内的进展情况。
- animation-fill-mode 指定CSS动画在执行之前和之后应如何将样
- @keyframes 规定动画
- animation 所有动画属性的简写属性，除了animation-play-state属性
animation:动画名称 动画时间 运动曲线 开始时间 播放次数 是否反方向
animation:name duration timing-function delay iteration-count direction;
timing-function
delay
iteration-count
direction
参考：http://www.w3school.com.cn/cssref/pr_animation-direction.asp
/**demo1********************************************************************/
<style>
div{
width: 50px;
height: 50px;
background: red;
animation:zidingyimingcheng 5s ease 0s 2 reverse;
}
@keyframes zidingyimingcheng{
form{
transform:translateX(0);
}
to{
transform:translateX(1200px);
}
}
</style>
/**demo2********************************************************************/
<style>
div{
width: 50px;
height: 50px;
background: red;
animation:zidingyimingcheng 5s ease 0s 2 reverse;
}
@keyframes zidingyimingcheng{
0%{
transform:translate3d(0,0,0);
}
25%{
transform:translate3d(1000px,0,0);
}
50%{
transform:translate3d(1000px,500px,0) rotateY(360px);
}
75%{
transform:translate3d(0,500px,0);
}
100%{
transform:translate3d(0,0,0);
}
}
</style>
轮播图
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.lunbo {
width:9999px;
animation:watchs 8S infinite 2s running;
}
@keyframes watchs {
0% {
transform:translateX(0px);
}
5% {
transform:translateX(-1200px);
}
25% {
transform:translateX(-1200px);
}
30% {
transform:translateX(-2400px);
}
50% {
transform:translateX(-2400px);
}
55% {
transform:translateX(-3600px);
}
75% {
transform:translateX(-3600px);
}
80% {
transform:translateX(-4800px);
}
100% {
transform:translateX(-4800px);
}
}
.lunbo:hover {
animation-play-state:paused;/**鼠标悬浮停止滑动**/
cursor:pointer;
}
.biankuang {
width:1200px;
height:300px;
overflow:hidden;
margin:0 auto;
}
.lunboimg {
float:left;
width:1200px;
}
.biankuang img {
border-radius:5px;
width:1200px;
height:300px;
}
</style>
</head>
<body>
<div class="biankuang">
<div class="lunbo">
<div class="lunboimg"><img src="https://img.zcool.cn/community/[email protected]" alt="banner1"></div>
<div class="lunboimg"><img src="https://img.zcool.cn/community/[email protected]" alt="banner2"></div>
<div class="lunboimg"><img src="https://img.zcool.cn/community/[email protected]" alt="banner3"></div>
<div class="lunboimg"><img src="https://img.zcool.cn/community/[email protected]" alt="banner4"></div>
<div class="lunboimg"><img src="https://img.zcool.cn/community/[email protected]" alt="banner5"></div>
</div>
</div>
</body>
</html>