作為前端剛入門的小菜鳥，只想記錄一下每天的小收獲

對於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+ 無

//兼容完整版，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;

[email protected] 也需要加上前綴

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

CSS3——animation的基礎（輪播圖）