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><span>いろいろアニメーション</span></h1>
  10. <p>飛んだり跳ねたりブルブルしたりして、賑やかし。</p>
  11. </div>
  12. <img src="../img/slide_01.png">
  13. </section>
  14. <section id="slide02">
  15. <div class="contents">
  16. <h1><span>いろいろアニメーション</span></h1>
  17. <p>飛んだり跳ねたりブルブルしたりして、賑やかし。</p>
  18. </div>
  19. <img src="../img/slide_02.png">
  20. </section>
  21. <section id="slide03">
  22. <div class="contents">
  23. <h1><span>いろいろアニメーション</span></h1>
  24. <p>飛んだり跳ねたりブルブルしたりして、賑やかし。</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. #switch1:checked ~ #slideshow .slideContents #slide01 h1,
  19. #switch1:checked ~ #slideshow .slideContents #slide01 p,
  20. #switch2:checked ~ #slideshow .slideContents #slide02 h1,
  21. #switch2:checked ~ #slideshow .slideContents #slide02 p,
  22. #switch3:checked ~ #slideshow .slideContents #slide03 h1,
  23. #switch3:checked ~ #slideshow .slideContents #slide03 p {
  24. transition: none;
  25. }
  26. .slideContents section h1 {
  27. -webkit-perspective: 500px;
  28. perspective: 500px;
  29. -webkit-transform-origin: 50% 100%;
  30. transform-origin: 50% 100%;
  31. -webkit-animation: jump .5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite alternate;
  32. animation: jump .5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite alternate;
  33. }
  34. .slideContents section h1 span {
  35. display: block;
  36. -webkit-animation: rotate 2s infinite;
  37. animation: rotate 2s infinite;
  38. }
  39. .slideContents section p {
  40. -webkit-animation: shake .3s infinite alternate;
  41. animation: shake .3s infinite alternate;
  42. }
  43. @-webkit-keyframes shake {
  44. 0% { -webkit-transform: translate(0) rotate(0deg); }
  45. 10% { -webkit-transform: translate(-3px, -2px) rotate(-1.5deg); }
  46. 20% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
  47. 30% { -webkit-transform: translate(-2px, -2px) rotate(-.6deg); }
  48. 40% { -webkit-transform: translate(3px, 3px) rotate(.5deg); }
  49. 50% { -webkit-transform: translate(0) rotate(0deg); }
  50. 60% { -webkit-transform: translate(-3px, -4px) rotate(-1deg); }
  51. 70% { -webkit-transform: translate(1px, -4px) rotate(1.5deg); }
  52. 80% { -webkit-transform: translate(-3px, -2px) rotate(-.3deg); }
  53. 90% { -webkit-transform: translate(3px, 2px) rotate(.4deg); }
  54. 100% { -webkit-transform: translate(0) rotate(0deg); }
  55. }
  56. @-webkit-keyframes jump {
  57. 0% { -webkit-transform: translateY(0); }
  58. 100% { -webkit-transform: translateY(-10px); }
  59. }
  60. @-webkit-keyframes rotate {
  61. 0% { -webkit-transform: rotateX(0deg); }
  62. 5% { -webkit-transform: rotateX(0deg); }
  63. 45% { -webkit-transform: rotateX(-180deg); }
  64. 65% { -webkit-transform: rotateX(-180deg); }
  65. 95% { -webkit-transform: rotateX(-360deg); }
  66. 100% { -webkit-transform: rotateX(-360deg); }
  67. }
  68. @keyframes shake {
  69. 0% { transform: translate(0) rotate(0deg); }
  70. 10% { transform: translate(-3px, -2px) rotate(-1.5deg); }
  71. 20% { transform: translate(1px, -1px) rotate(1deg); }
  72. 30% { transform: translate(-2px, -2px) rotate(-.6deg); }
  73. 40% { transform: translate(3px, 3px) rotate(.5deg); }
  74. 50% { transform: translate(0) rotate(0deg); }
  75. 60% { transform: translate(-3px, -4px) rotate(-1deg); }
  76. 70% { transform: translate(1px, -4px) rotate(1.5deg); }
  77. 80% { transform: translate(-3px, -2px) rotate(-.3deg); }
  78. 90% { transform: translate(3px, 2px) rotate(.4deg); }
  79. 100% { transform: translate(0) rotate(0deg); }
  80. }
  81. @keyframes jump {
  82. 0% { transform: translateY(0); }
  83. 100% { transform: translateY(-10px); }
  84. }
  85. @keyframes rotate {
  86. 0% { transform: rotateX(0deg); }
  87. 5% { transform: rotateX(0deg); }
  88. 45% { transform: rotateX(-180deg); }
  89. 65% { transform: rotateX(-180deg); }
  90. 95% { transform: rotateX(-360deg); }
  91. 100% { transform: rotateX(-360deg); }
  92. }

いろいろアニメーション

飛んだり跳ねたりブルブルしたりして、賑やかし。

いろいろアニメーション

飛んだり跳ねたりブルブルしたりして、賑やかし。

いろいろアニメーション

飛んだり跳ねたりブルブルしたりして、賑やかし。