圖片輪播--純css

關於css動畫animation以及圖片輪播不是很清晰，就查了一下資料

現在自己再整理一下思路

1，整體思路：兩個div:一個div（.wrap),一個div（.inner）；

其中：.wrap包裹.inner ，它的寬度和單張照片等寬，如width：100px;並設定overflow：hidden

其中：.inner裡邊放圖片img，inner的寬度是所有圖片排列一排的總寬度

其中：(三張圖片) 給img設定一個寬度，eg：width：100px; float：left；

2，動畫：設定每次偏移一張圖片的寬度，即顯示出一張圖片

3，動畫分解：讓圖片切換後靜置一下，看起來更自然一點，可將動畫細分為切換和靜置兩個階段。

<div class="wrap">  
    <div class="inner">  
        <img src="img/01.jpg">  
        <img src="img/02.jpg">  
        <img src="img/03.jpg">  
    </div>  
</div>  

/*  圖片輪播 */  
img{  
    width: 100px;  
    height: 100px;  
    float: left;  
}  
.wrap{  
    position: absolute;  
    width: 100px;  
    height: 100px;  
    background: palegoldenrod;  
    overflow: hidden;  
}  
.inner{  
    position: absolute;  
    z-index: 9;  
    width: 300px;  
    height: 100px;  
    background: pink;  
    /*width: calc(100px * 3);/!*---修改圖片數量的話需要修改下面的動畫引數*!/*/  
    animation: anim 10s  infinite alternate;  
}  
@keyframes anim {/*---每圖片切換有兩個階段：位移切換和靜置。中間的效果可以任意定製----*/  
    0%,20%{ margin-left: 0px;}  
    25% ,40%{margin-left: -100px;}  
    45%, 60%{margin-left: -200px;}  
    65%, 90%{margin-left: -100px;}  
    95%, 100%{margin-left: 0px;}  
  
}  

======= 分割線 =======
說到animation，必須知道keyframe--"關鍵幀"，用來規定時間段內，動畫執行什麼動作。
（2）keyframes語法：@keyframes animationname {keyframes-selector {css-styles;}}
》》》 animationname，必須的 定義animation的名稱
》》》 keyframes-selector，必須的，動畫持續時間的百分比
》》》 css-styles， 必須的，一個或多個合法的css樣式
【"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，我們可以在這個規則中建立多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等，不過有一點需要注意的是，我們可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結束，也就是說這個 "from"就相當於"0%"而"to"相當於"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號省略，我們在這裡必須加上百分符號（“%”）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。因為keyframes的單位只接受百分比值。】
【比較：
animation、transform、transition
很多的資料會把 transform 和 transition 同時直接歸類為動畫，的確，從很多實際使用的例子中看，transform 和 transition 都表現出動畫的特徵，但實際上，它們仍有很大的區別：
transform 和 transition 需要經過使用者觸發才會表現出動態的效果，這些觸發條件可以是:link、:visited、:hover、:active 和 :focus 五個 CSS 偽類，也可以是 click、focus 等 JavaScirpt 事件，如果沒有設定觸發條件而直接給元素設定 transform 或 transition ，使用者只能看到元素的終態而沒有動畫過程。animation 則無須觸發條件，開發者只需為元素繫結動畫即可。
另外，在舊版本的 animation 中，animation 、transform 以及 transition 都有一個重要的性質——過程執行完畢後會回撤，例如以 :hover 觸發 transform ，在滑鼠離開元素後動畫自動反向播放，使到元素回到 transform 之前的狀態，animation 也會在動畫結束後回滾，但不會反向播放動畫，而是直接跳到動畫播放之前的動態。
但是，經過修訂，animation 增加了一個很重要的屬性 animation-fill-mode ，這個屬性控制設定動畫之外的狀態，即元素在動畫開始前後的狀態是否根據動畫設定中“0%”、“100%”的狀態設定，animation-fill-mode 的值可以為 none、forwards、backwards 或 both ，預設為 none ，即動畫過程中“0%”、“100%”的狀態不會設定為元素開始和結束的狀態，backwards 和 forwards 則分別設定開始和結束的狀態，both 則同時設定兩個的狀態，例如上面平移元素的例子，若加入 forwards 屬性，則在動畫結束後元素會保留在 100% 時動畫設定的位置而不回撤。
有了這個屬性，animation 動畫也就更加完整了，雖然沒有了這個屬性，開發者仍可以設定出自己需要的效果，但是 animation 是需要配合其他 CSS 屬性設定才會有最終的效果，若沒有了這個屬性設定動畫將會複雜很多。】
（3）animation的7個屬性：
animation屬性一個速記法，
另外我們這個屬性跟前面所講的transition一樣，我們可以同時附幾個animation給一個元素，我們只需要用逗號“，”隔開。

animation:[<span class="xml"><span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-name</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-duration</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-timing-function</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-delay</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-iteration-count</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-direction</span>></span>] [, [<span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-name</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-duration</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-timing-function</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-delay</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-iteration-count</span>></span> || <span class="tag"><<span class="title" style="color:rgb(38,139,210);">animation-direction</span>></span>] ]* </span>  

1）animation-name;

animation-name: none | IDENT[,none | IDENT]*;

用來定義一個動畫的名稱，其主要有兩個值：IDENT是由Keyframes建立的動畫名，換句話說此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實現任何動畫效果；none為預設值，當值為none時，將沒有任何動畫效果。
2）animation-duration;

animation-duration: <span class="xml"><span class="tag"><<span class="title" style="color:rgb(38,139,210);">time</span>></span>[,<span class="tag"><<span class="title" style="color:rgb(38,139,210);">time</span>></span>]*</span>  

3）animation-timing-function;

animation-timing-<span class="keyword" style="color:rgb(133,153,0);">function</span>:ease | linear | ease-<span class="keyword" style="color:rgb(133,153,0);">in</span> | ease-out | ease-<span class="keyword" style="color:rgb(133,153,0);">in</span>-out | cubic-bezier(<span class="xml"><span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>, <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>)]* </span>  

animation-timing-function:是指元素根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式。
動畫的過渡型別，引數可選值類似於 transition-timing-function ，預設為 ease ，具體如下：
linear：線性過渡。相當於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：平滑過渡。相當於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。相當於貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。相當於貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。相當於貝塞爾曲線(0.42, 0, 0.58, 1.0)
cubic-bezier(number, number, number, number)：特定的貝塞爾曲線型別，number 在 [0, 1] 區間內取值

4）animation-delay;

animation-delay: <span class="xml"><span class="tag"><<span class="title" style="color:rgb(38,139,210);">time</span>></span>[,<span class="tag"><<span class="title" style="color:rgb(38,139,210);">time</span>></span>]*</span>  

animation-delay:是用來指定元素動畫開始時間。取值為<time>為數值，單位為s(秒)，其預設值也是0。這個屬性和transition-delayy使用方法是一樣的。
5）animation-iteration-count;

animation-iteration-count:infinite | <span class="xml"><span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span> [, infinite | <span class="tag"><<span class="title" style="color:rgb(38,139,210);">number</span>></span>]* </span> 

6）animation-direction;

animation-direction: normal | alternate [, normal | alternate]*

animation-direction是用來指定元素動畫播放的方向，其只有兩個值，預設值為normal，如果設定為normal時，動畫的每次迴圈都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。
7）animation-play-state

animation-play-state:running | paused [, running | paused]* 

animation-play-state主要是用來控制元素動畫的播放狀態。其主要有兩個值，running和paused其中running為預設值。他們的作用就類似於我們的音樂播放器一樣，可以通過paused將正在播放的動畫停下了，也可以通過running將暫停的動畫重新播放，我們這裡的重新播放不一定是從元素動畫的開始播放，而是從你暫停的那個位置開始播放。另外如果暫時了動畫的播放，元素的樣式將回到最原始設定狀態。這個屬性目前很少核心支援。