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

对于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.幻灯片式轮播图

*{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代码处

Title

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

}