CSS3——animation的基础（轮播图）

作为前端刚入门的小菜鸟，只想记录一下每天的小收获

对于animation动画

1.实现动画效果的组成：

（1）通过类似Flash的关键帧来声明一个动画

（2）在animation属性中调用关键帧声明的动画

2.animation是一个复合属性包括很多的子属性：

　　animation-name:用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes 规则。CSS 加载时会应用animation-name 指定的动画，从而执行动画。　

　　animation-duration 用来设置动画播放所需的时间

　　animation-timing-function 用来设置动画的播放方式，有一些值如下：

　　　　　速度由快到慢，然后逐渐变慢：ease

　　　　　速度越来越快，呈现加速状态：ease-in;

　　　　　速度越来越慢，呈现一种减速状态：ease-out

　　　　　先加速，在减速：ease-in-out

　　　　匀速状态：linear

　　　　自定义(三段赛贝尔曲线);cubic-bezier

　　animation-delay 用来指定动画的延迟时间（一直循环的值：infinite）

　　animation-iteration-count 用来指定动画播放的循环次数

　　animation-direction 用来指定动画的播放方向(逆向：alternate)

　　animation-play-state 用来控制动画的播放状态(停止：paused)

　　animation-fill-mode 用来设置动画的时间外属性

　　　　　　动画结束后不返回：forwards

　　　　　　动画结束后迅速返回：backforwards

　　　　　　根据情况产生前两个效果：base

　　　　　　默认：normal;

　　简写形式：animation: myani 1s ease 2 alternate 0s both;

3.为了兼容旧版本，需要加上相应的浏览器前缀，版本信息如下表：

Opera Firefox Chrome Safari IE

支持需带前缀15 ~ 29 5 ~ 15 4 ~ 42 4 ~ 8 无

支持不带前缀无16+ 43+ 无10.0+

//兼容完整版，Opera 在这个属性上加入webkit，所以没有-o-

-webkit-animation: myani 1s ease 2 alternate 0s both;

-moz-animation: myani 1s ease 2 alternate 0s both;

-ms-animation: myani 1s ease 2 alternate 0s both;

transition: all 1s ease 0s;

//@keyframes 也需要加上前缀

@-webkit-keyframes myani {...}

@-moz-keyframes myani {...}

@-o-keyframes myani {...}

@-ms-keyframes myani {...}

keyframes myani {...}

<下面的例子没有加上兼容性>

1.幻灯片式轮播图

<!--这里的幻灯片式是以插入图片来写的，也可以写成背景图片轮播，代码会更简洁一点-->

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

*{margin:0;padding:0;}

#container{
    width:100%;
    height:100px;
    position:relative;
    overflow:hidden;
}

#container>:not(:first-child){
    opacity:0;
}

#container>:first-child{
    width:300px;
    height:100px;
    position:absolute;
    font-weight:bold;">mediumpurple;
    animation-name:shuf1;
    animation-duration:20s;   /*动画执行时间*/
    animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
    animation-iteration-count:infinite;  /*动画执行次数*/
}

#container>:nth-child(2){
    width:300px;
    height:100px;
    position:absolute;
    font-weight:bold;">palegreen;
    animation-name:shuf2;
    animation-duration:20s;   /*动画执行时间*/
    animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
    animation-iteration-count:infinite;  /*动画执行次数*/
}

#container>:nth-child(3){
    width:300px;
    height:100px;
    poaition:absolute;
    font-weight:bold;">pink;
    animation-name:shuf3;
    animation-duration:20s;   /*动画执行时间*/
    animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
    animation-iteration-count:infinite;  /*动画执行次数*/
}

#container>:nth-child(4){
    width:300px;
    height:100px;
    poaition:absolute;
    font-weight:bold;">lightskyblue;
    animation-name:shuf4;
    animation-duration:20s;   /*动画执行时间*/
    animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
    animation-iteration-count:infinite;  /*动画执行次数*/
}

#container>:nth-child(3){
     width:300px;
     height:100px;
     poaition:absolute;
     font-weight:bold;">yellowgreen;
     animation-name:shuf5;
     animation-duration:20s;   /*动画执行时间*/
     animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
     animation-iteration-count:infinite;  /*动画执行次数*/
 }

#container>:nth-child(6){
    width:300px;
    height:100px;
    poaition:absolute;
    font-weight:bold;">darkgrey;
    animation-name:shuf6;
    animation-duration:20s;   /*动画执行时间*/
    animation-timing-function:ease-in-out; /*动画执行方法：匀速*/
    animation-iteration-count:infinite;  /*动画执行次数*/
}

@keyframes shuf1 {
    0% {opacity: 1;}
    14%,28%,42%,56%,72%,86%,100%{opacity:0.5}
}

@keyframes shuf2 {
    0%,14% {opacity:0 ;}
    28%{opacity:1;}
    42%,56%,72%,86% ,100%{opacity:0;}
}

@keyframes shuf3 {
    0%,14% ,28%{opacity: 0;}
    42% {opacity:1;}
    56%,72%,86% ,100%{opacity:0;}
}

@keyframes shuf4 {
    0%,14% ,28%,42% {opacity: 0;}
    56% {opacity:1;}
    72%,86% ,100%{opacity:0;}
}

@keyframes shuf5 {
    0%,14% ,28%,42%,56% {opacity: 0;}
    72% {opacity:1;}
    86% ,100%{opacity:0;}
}

@keyframes shuf6 {
    0%,14% ,28%,42%,56%,72% {opacity: 0;}
    86% {opacity:1; }
    100%{opacity:0;}
}

2.水平轮播图

html代码处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="case2.css">
</head>
<body>
<div id="main">
    <div id="container">
       <div></div>
       <div></div>
       <div></div>
    </div>
</div>
</body>
</html>

css样式

*{margin:0;padding:0;}

#main{
    width:1000px;
    height:200px;
    margin:0 auto;
    border:1px solid black;
    position:relative;
    overflow:hidden;
}

#container{
    width:3000px;
    height:200px;
    border:1px solid black;
   position:absolute;
    top:0;
    animation-name:a1;
    animation-duration:30s;/*设置动画播放的时间*/
    animation-timing-function:linear;  /*设置动画的缓动状态*/
    animation-iteration-count:infinite; /*设置动画的循环次数*/
    animation-direction:alternate;  /* 设置动画逆向运动*/
}
#container>div{
    width:1000px;
    height:200px;
    float:left;

}

#container>:first-child{
    font-weight:bold;">#65B053;
}

#container>:nth-child(2){
    font-weight:bold;">#59B7DF;
}

#container>:nth-child(3){
    font-weight:bold;">#E8E25D;
}

@keyframes a1{
    0%{margin-left:0;}
    45%,50%{margin-left:-1000px;}/*设置每张图片的停留时间*/
    95%,100%{margin-left:-2000px;}
}