圖片從左向右出現是slideLeft 從右向左是slideRight？還有自動播放。。。。
.slideLeft:target{
? ? ? ? ? ? z-index: 100;
? ? ? ? ? ? -webkit-animation-name: slideLeft;
? ? ? ? ? ? -webkit-animation-duration: 1s;
? ? ? ? ? ? -webkit-animation-iteration-count: 1;
? ? ? ? ? ? -moz-animation-name: slideLeft;
? ? ? ? ? ? -moz-animation-duration: 1s;
? ? ? ? ? ? -moz-animation-iteration-count: 1;
? ? ? ? ? ? -ms-animation-name: slideLeft;
? ? ? ? ? ? -ms-animation-duration: 1s;
? ? ? ? ? ? -ms-animation-iteration-count: 1;
? ? ? ? ? ? -o-animation-name: slideLeft;
? ? ? ? ? ? -o-animation-duration: 1s;
? ? ? ? ? ? -o-animation-iteration-count: 1;
? ? ? ? ? ? animation-name: slideLeft;
? ? ? ? ? ? animation-duration: 1s;
? ? ? ? ? ? animation-iteration-count: 1;
? ? ? ? ? ? }
2017-10-09
.slideLeft?是html部分定義的類名
-webkit-animation-name: slideLeft;這是?下面那個定義的動畫名字，都是可以隨意改變的，重點是下面里面的參數（left），定義的初始位置（0% { left: -100%; }）和結束位置（? 100% { left: 0%; }）
@-webkit-keyframes 'slideLeft' {
? ? ? ? ? ? 0% { left: -100%; }
? ? ? ? ? ? 100% { left: 0%; }
? ? ? ? ? ? }
2017-09-26
下面的animation是以后要學的動畫部分。這節課主要練習CSS的選擇器的使用， ?.slideLeft實際上是選擇了文檔中img中類為slideLeft的那個圖片