1. <div id="wrapper">
  2. <div id="slideshow">
  3. <div class="slideContents">
  4. <section id="slide1">
  5. <img src="../img/slide_01.png">
  6. </section>
  7. <section id="slide2">
  8. <img src="../img/slide_02.png">
  9. </section>
  10. <section id="slide3">
  11. <img src="../img/slide_03.png">
  12. </section>
  13. <section id="slide4">
  14. <img src="../img/slide_04.png">
  15. </section>
  16. <section id="slide5">
  17. <img src="../img/slide_05.png">
  18. </section>
  19. </div>
  20. </div>
  21. </div>
  1. /* 略 */
  2. /* :::::: timer mechanism :::::: */
  3. .slideContents section {
  4. -webkit-animation: autoplay 30s infinite;
  5. animation: autoplay 30s infinite;
  6. }
  7. .slideContents #slide1 {
  8. position: relative;
  9. -webkit-animation-delay: 0;
  10. animation-delay: 0;
  11. }
  12. .slideContents #slide2 {
  13. -webkit-animation-delay: -24s;
  14. animation-delay: -24s;
  15. }
  16. .slideContents #slide3 {
  17. -webkit-animation-delay: -18s;
  18. animation-delay: -18s;
  19. }
  20. .slideContents #slide4 {
  21. -webkit-animation-delay: -12s;
  22. animation-delay: -12s;
  23. }
  24. .slideContents #slide5 {
  25. -webkit-animation-delay: -6s;
  26. animation-delay: -6s;
  27. }
  28. @-webkit-keyframes autoplay {
  29. 0% { -webkit-transform: translateX(0); }
  30. 16% { -webkit-transform: translateX(0); }
  31. 20% { -webkit-transform: translateX(-100%); }
  32. 20.001% { -webkit-transform: translateX(100%); }
  33. 96% { -webkit-transform: translateX(100%); }
  34. 100% { -webkit-transform: translateX(0); }
  35. }
  36. @keyframes autoplay {
  37. 0% { transform: translateX(0); }
  38. 16% { transform: translateX(0); }
  39. 20% { transform: translateX(-100%); }
  40. 20.001% { transform: translateX(100%); }
  41. 96% { transform: translateX(100%); }
  42. 100% { transform: translateX(0); }
  43. }