1. <ul>
  2. <li><span class="ball">ろ</span></li>
  3. <li><span class="ball">ぱ</span></li>
  4. <li><span class="ball">ん</span></li>
  5. </ul>
  1. ul {
  2. list-style: none;
  3. width: calc(360px + 2em);
  4. margin: 0 auto;
  5. padding: 0;
  6. }
  7. li {
  8. margin-bottom: 10px;
  9. }
  10. .ball {
  11. display: block;
  12. width: 1em;
  13. height: 1em;
  14. padding: .5em;
  15. color: #fff;
  16. background: #20b2aa;
  17. line-height: 1;
  18. text-align: center;
  19. border-radius: 50%;
  20. /* easeOutExpo */
  21. -webkit-animation: 5s cubic-bezier(0.19, 1, 0.22, 1) infinite alternate;
  22. animation: 5s cubic-bezier(0.19, 1, 0.22, 1) infinite alternate;
  23. }
  24. li:nth-child(1) .ball {
  25. -webkit-animation-name: rolling1;
  26. animation-name: rolling1;
  27. }
  28. li:nth-child(2) .ball {
  29. -webkit-animation-name: rolling2;
  30. animation-name: rolling2;
  31. }
  32. li:nth-child(3) .ball {
  33. -webkit-animation-name: rolling3;
  34. animation-name: rolling3;
  35. }
  36. @-webkit-keyframes rolling1 {
  37. 0% { -webkit-transform: translateX(0) rotate(0deg); }
  38. 100% { -webkit-transform: translateX(360px) rotate(1440deg); }
  39. }
  40. @-webkit-keyframes rolling2 {
  41. 0% { -webkit-transform: translateX(0) rotate(0deg); }
  42. 50% { -webkit-transform: translateX(180px) rotate(720deg); }
  43. 100% { -webkit-transform: translateX(360px) rotate(1440deg); }
  44. }
  45. @-webkit-keyframes rolling3 {
  46. 0% { -webkit-transform: translateX(0) rotate(0deg); }
  47. 10% { -webkit-transform: translateX(90px) rotate(360deg); }
  48. 30% { -webkit-transform: translateX(180px) rotate(720deg); }
  49. 60% { -webkit-transform: translateX(270px) rotate(1080deg); }
  50. 100% { -webkit-transform: translateX(360px) rotate(1440deg); }
  51. }
  52. @keyframes rolling1 {
  53. 0% { transform: translateX(0) rotate(0deg); }
  54. 100% { transform: translateX(360px) rotate(1440deg); }
  55. }
  56. @keyframes rolling2 {
  57. 0% { transform: translateX(0) rotate(0deg); }
  58. 50% { transform: translateX(180px) rotate(720deg); }
  59. 100% { transform: translateX(360px) rotate(1440deg); }
  60. }
  61. @keyframes rolling3 {
  62. 0% { transform: translateX(0) rotate(0deg); }
  63. 10% { transform: translateX(90px) rotate(360deg); }
  64. 30% { transform: translateX(180px) rotate(720deg); }
  65. 60% { transform: translateX(270px) rotate(1080deg); }
  66. 100% { transform: translateX(360px) rotate(1440deg); }
  67. }