範例2(簡):Travel

【範例結果】

三、CSS3 :Animation應用

Html結構

    <h3>CSS3:animation應用</h3>
    <div id="Anslider">
        <img src="./images/AnSlider/AnSlider01.png" width="1000" height="450" alt=""/>
        <img src="./images/AnSlider/AnSlider02.png" width="1000" height="450" alt=""/>
        <img src="./images/AnSlider/AnSlider03.png" width="1000" height="450" alt=""/>
        <img src="./images/AnSlider/AnSlider04.png" width="1000" height="450" alt=""/>
        <img src="./images/AnSlider/AnSlider05.png" width="1000" height="450" alt=""/>
    </div>

CSS3美化

/* #Anslider */
#Anslider{
  width: 1000px; height: 450px; margin: 50px auto;
  position: relative; overflow: hidden;
}
#Anslider img{ position: absolute; }
#Anslider img:nth-child(1){animation: Anslider1 10s infinite; z-index: 1; }
#Anslider img:nth-child(2){top:450px;animation: Anslider2 10s infinite; z-index: 4;}
#Anslider img:nth-child(3){top:450px;animation: Anslider3 10s infinite; z-index: 2;}
#Anslider img:nth-child(4){top:450px;animation: Anslider4 10s infinite;z-index: 2;}
#Anslider img:nth-child(5){left:-1000px;animation: Anslider5 10s infinite; z-index: 3;}
@keyframes Anslider1{
  0%{ opacity:0;}
  25%{ opacity:1; }
  50%{ }
  75%{ }
  100%{ }
}
@keyframes Anslider2{
  0%{ }
  25%{ top:0;}
  50%{ top:0;}
  75%{ top:0;}
  100%{top:0; }
}
@keyframes Anslider3{
  0%{ }
  25%{ }
  50%{ top:0;}
  75%{ top:0;}
  100%{ top:0;}
}
@keyframes Anslider4{
  0%{ }
  25%{ }
  50%{ }
  75%{top:0}
  100%{top:0}
}
@keyframes Anslider5{
  0%{ }
  25%{ }
  50%{ }
  75%{ }
  100%{ left:0px; }
}