1. <div id="wrapper">
  2. <input type="radio" id="switch1" name="slideshow" checked>
  3. <input type="radio" id="switch2" name="slideshow">
  4. <input type="radio" id="switch3" name="slideshow">
  5. <div id="slideshow">
  6. <div class="slideContents">
  7. <section id="slide01">
  8. <div class="contents">
  9. <h1>アニメーションする</h1>
  10. <p>animationプロパティを使って、ほんのりアピール。</p>
  11. </div>
  12. <img src="../img/slide_01.png">
  13. </section>
  14. <section id="slide02">
  15. <div class="contents">
  16. <h1>アニメーションする</h1>
  17. <p>animationプロパティを使って、ほんのりアピール。</p>
  18. </div>
  19. <img src="../img/slide_02.png">
  20. </section>
  21. <section id="slide03">
  22. <div class="contents">
  23. <h1>アニメーションする</h1>
  24. <p>animationプロパティを使って、ほんのりアピール。</p>
  25. </div>
  26. <img src="../img/slide_03.png">
  27. </section>
  28. </div>
  29. <p class="arrow prev">
  30. <i class="ico"></i>
  31. <label for="switch1"></label>
  32. <label for="switch2"></label>
  33. <label for="switch3"></label>
  34. </p>
  35. <p class="arrow next">
  36. <i class="ico"></i>
  37. <label for="switch1"></label>
  38. <label for="switch2"></label>
  39. <label for="switch3"></label>
  40. </p>
  41. </div>
  42. </div>
  1. /* 略 */
  2. /* :::::: action mechanism :::::: */
  3. .slideContents section,
  4. .slideContents section h1,
  5. .slideContents section p {
  6. -webkit-transition: opacity 1s, -webkit-transform 1s;
  7. transition: opacity 1s, transform 1s;
  8. }
  9. #switch1:checked ~ #slideshow .slideContents #slide01 h1,
  10. #switch1:checked ~ #slideshow .slideContents #slide01 p,
  11. #switch2:checked ~ #slideshow .slideContents #slide02 h1,
  12. #switch2:checked ~ #slideshow .slideContents #slide02 p,
  13. #switch3:checked ~ #slideshow .slideContents #slide03 h1,
  14. #switch3:checked ~ #slideshow .slideContents #slide03 p {
  15. opacity: 1;
  16. }
  17. /* アニメーションする */
  18. .slideContents section h1,
  19. .slideContents section p {
  20. -webkit-transform-origin: 50% 100%;
  21. transform-origin: 50% 100%;
  22. }
  23. #switch1:checked ~ #slideshow .slideContents #slide01 h1,
  24. #switch1:checked ~ #slideshow .slideContents #slide01 p,
  25. #switch2:checked ~ #slideshow .slideContents #slide02 h1,
  26. #switch2:checked ~ #slideshow .slideContents #slide02 p,
  27. #switch3:checked ~ #slideshow .slideContents #slide03 h1,
  28. #switch3:checked ~ #slideshow .slideContents #slide03 p {
  29. transition: none;
  30. }
  31. #switch1:checked ~ #slideshow .slideContents #slide01 h1,
  32. #switch2:checked ~ #slideshow .slideContents #slide02 h1,
  33. #switch3:checked ~ #slideshow .slideContents #slide03 h1 {
  34. -webkit-animation: titleAppear 1.5s;
  35. animation: titleAppear 1.5s;
  36. }
  37. #switch1:checked ~ #slideshow .slideContents #slide01 p,
  38. #switch2:checked ~ #slideshow .slideContents #slide02 p,
  39. #switch3:checked ~ #slideshow .slideContents #slide03 p {
  40. -webkit-animation: textAppear 1.3s;
  41. animation: textAppear 1.3s;
  42. }
  43. @-webkit-keyframes titleAppear {
  44. 0% { opacity: 0; }
  45. 68% { opacity: 0; -webkit-transform: translateY(6px) scaleY(1); }
  46. 75% { opacity: 1; -webkit-transform: translateY(6px) scaleY(.8); }
  47. 100% { -webkit-transform: translateY(0) scaleY(1); }
  48. }
  49. @-webkit-keyframes textAppear {
  50. 0% { opacity: 0; }
  51. 60% { opacity: 0; -webkit-transform: translateY(10px) scaleY(1); }
  52. 68% { opacity: 1; -webkit-transform: translateY(10px) scaleY(.6); }
  53. 95% { -webkit-transform: translateY(0) scaleY(1); }
  54. }
  55. @keyframes titleAppear {
  56. 0% { opacity: 0; }
  57. 68% { opacity: 0; transform: translateY(6px) scaleY(1); }
  58. 75% { opacity: 1; transform: translateY(6px) scaleY(.8); }
  59. 100% { transform: translateY(0) scaleY(1); }
  60. }
  61. @keyframes textAppear {
  62. 0% { opacity: 0; }
  63. 60% { opacity: 0; transform: translateY(10px) scaleY(1); }
  64. 68% { opacity: 1; transform: translateY(10px) scaleY(.6); }
  65. 95% { transform: translateY(0) scaleY(1); }
  66. }

アニメーションする

animationプロパティを使って、ほんのりアピール。

アニメーションする

animationプロパティを使って、ほんのりアピール。

アニメーションする

animationプロパティを使って、ほんのりアピール。