定义动画关键帧方案
@keyframe 动画名{
0%(from){
样式
}
100%(to){
样式
}
}
设置动画名称(关键帧)
animation-name:动画名;
动画播放时间
animation-duration: 2s;
动画播放完成后的停止位置
默认是backwards:播放完成后回到第一个关键帧样式
forwards：播放完成后回到最后一个关键帧样式
animation-fill-mode:forwards;
动画关键帧执行方向
指动画方案 0%-100% normal
100%往0% reverse
0%-100%-0% alternate(至少要播放2次，否则无法实现)
animation-direction:alternate;
动画播放次数 infinite 表示无限次数
animation-iteration-count:infinite;
动画延时
animation-delay: 3s;
动画的播放控制 播放running(默认值) 暂停:paused;
animation-play-state: paused;
多个动画样式的设置
例如：animation:move 2s 1 linear,rotate 2s 2s 1 linear;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style media="screen">
@-webkit-keyframes mov1{
0%{
transform: translateX(0);
}
20%{
transform: translateX(0);
}
25%{
transform: translateX(-800px);
}
45%{
transform: translateX(-800px);
}
50%{
transform: translateX(-1600px);
}
70%{
transform: translateX(-1600px);
}
75%{
transform: translateX(-2400px);
}
95%{
transform: translateX(-2400px);
}
100%{
transform: translateX(-3200px);
}
}
@-webkit-keyframes mov2{
0%{
transform: translateY(0);
}
20%{
transform: translateY(0);
}
25%{
transform: translateY(-40px);
}
45%{
transform:translateY(-40px);
}
50%{
transform: translateY(-80px);
}
70%{
transform: translateY(-80px);
}
75%{
transform: translateY(-120px);
}
95%{
transform: translateY(-120px);
}
100%{
transform: translateY(-160px);
}
}
@-webkit-keyframes span1{
0%{
background: white;
}
24%{
background: white;
}
25%{
background: gray;
}
100%{
background: gray;
}
}
@-webkit-keyframes span2{
0%{
background:gray;
}
24%{
background: gray;
}
25%{
background: white;
}
49%{
background: white;
}
50%{
background: gray;
}
100%{
background: gray;
}
}
@-webkit-keyframes span3{
0%{
background: gray;
}
24%{
background: gray;
}
25%{
background: gray;
}
49%{
background: gray;
}
50%{
background: white;
}
74%{
background: white;
}
75%{
background: gray;
}
100%{
background: gray;
}
}
@-webkit-keyframes span4{
0%{
background: gray;
}
24%{
background: gray;
}
25%{
background: gray;
}
49%{
background: gray;
}
50%{
background: gray;
}
74%{
background: gray;
}
75%{
background: white;
}
99%{
background: white;
}
100%{
background: gray;
}
}
body,span,p{
padding:0;
margin:0;
}
.wrap{
width: 800px;
margin:200px auto;
}
.box{
position: relative;
overflow:hidden;
}
img{
width: 20%;
float: left;
}
.scroll:after{
content: "";
display: block;
clear: both;
}
.mask{
position: absolute;
left:0;
bottom: 0;
z-index: 10;
background: rgba(0,0,0,0.6);
width: 100%;
height: 40px;
}
.text{
width: 100%;
height: 40px;
position: absolute;
left:0;
bottom:0;
z-index: 20;
line-height: 40px;
overflow:hidden;
color:black;
text-align: center;
}
.text p{
animation: mov2 10s linear infinite;
}
.scroll{
width: 4000px;
animation: mov1 10s linear infinite;
}
.btn{
margin:10px;
text-align: center;
}
span{
width: 7px;
height: 7px;
background: gray;
border:1px solid gray;
border-radius: 100%;
display: inline-block;
margin:0 10px;
}
.btn span:nth-child(1){
animation: span1 10s linear infinite;
}
.btn span:nth-child(2){
animation: span2 10s linear infinite;
}
.btn span:nth-child(3){
animation: span3 10s linear infinite;
}
.btn span:nth-child(4){
animation: span4 10s linear infinite;
}
.wrap:hover .scroll{
animation-play-state: paused;
}
.wrap:hover p{
animation-play-state: paused;
}
.wrap:hover span{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="scroll">
<img src="./1.jpg" alt="">
<img src="./2.jpg" alt="">
<img src="./3.jpg" alt="">
<img src="./4.jpg" alt="">
</div>
<div class="mask"></div>
<div class="text">
<p>看头条</p>
<p>癌症大数据</p>
<p>今日头条</p>
<p>易车网</p>
</div>
</div>
<div class="btn">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>