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;}}