1. <p class="delay1 delay"><a>すぐにアニメーションを開始します</a></p>
  2. <p class="delay2 delay"><a>0.3秒待ってから開始します</a></p>
  3. <p class="delay3 delay"><a>0.3秒進んだ時点から開始します</a></p>
  1. .delay {
  2. position: relative;
  3. width: 100%;
  4. margin: 6px auto;
  5. font-size: 14px;
  6. text-align: center;
  7. }
  8. .delay a {
  9. z-index: 3;
  10. position: relative;
  11. display: block;
  12. padding: 0.8em 0;
  13. color: #20b2aa;
  14. }
  15. .delay::before,
  16. .delay::after {
  17. content: "";
  18. display: block;
  19. position: absolute;
  20. top: 0;
  21. left: 0;
  22. width: 100%;
  23. height: 100%;
  24. }
  25. .delay::before {
  26. z-index: 1;
  27. background-color: #fff;
  28. opacity: 0.3;
  29. }
  30. .delay::after {
  31. z-index: 2;
  32. width: 0%;
  33. background-color: #20b2aa;
  34. }
  35. body:hover .delay::after {
  36. width: 100%;
  37. transition: width 1s linear;
  38. }
  39. .delay1::after {
  40. transition-delay: 0s;
  41. }
  42. .delay2::after {
  43. transition-delay: 0.3s;
  44. }
  45. .delay3::after {
  46. transition-delay: -0.3s;
  47. }