説明なし

animation.css 1.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. .step1_line {
  2. background-image: url(../img/step1_line.png);
  3. background-repeat: no-repeat;
  4. background-position: center center;
  5. position: absolute;
  6. height: 1510px;
  7. width: 240px;
  8. /*animation: step2_line 2s linear infinite;*/
  9. z-index: 999999;
  10. }
  11. .step2_line {
  12. background-image: url(../img/step2_line.png);
  13. background-repeat: no-repeat;
  14. background-position: center center;
  15. position: absolute;
  16. height: 1012px;
  17. width: 232px;
  18. /*animation: step3_line_l 2s linear infinite;*/
  19. }
  20. .step3_line {
  21. background-image: url(../img/step3_line.png);
  22. background-repeat: no-repeat;
  23. background-position: center center;
  24. position: absolute;
  25. height: 1012px;
  26. width: 235px;
  27. /* animation: step3_line_l 2s linear infinite;*/
  28. z-index: 3333;
  29. }
  30. .step4_line {
  31. background-image: url(../img/step4_line.png);
  32. background-repeat: no-repeat;
  33. background-position: center center;
  34. position: absolute;
  35. height: 1530px;
  36. width: 220px;
  37. /* animation: step2_line 2s linear infinite;*/
  38. z-index: 999999;
  39. }
  40. @keyframes step2_line {
  41. 0% { clip: rect(1600px, 120px, 1600px, 0px); }
  42. 50% { clip: rect(0px, 120px, 1600px, 0px); }
  43. 100% { clip: rect(0px, 120px, 0px, 0px); }
  44. }
  45. .posi_line1{
  46. left: 800px;
  47. top: 310px;
  48. /*animation: step2_line 2s linear 0s infinite;*/
  49. }
  50. .posi_line3{
  51. left: 2780px;
  52. top: 650px;
  53. /*animation: step3_line_l 2s linear 4s infinite;*/
  54. }
  55. .posi_line4{
  56. left: 4730px;
  57. top: 650px;
  58. /*animation: step3_line_r 2s linear 6s infinite;*/
  59. }
  60. .posi_line5{
  61. left: 6580px;
  62. top: 310px;
  63. /*animation: step2_line 2s linear 8s infinite;*/
  64. }
  65. @keyframes step3_line_l {
  66. 0% { clip: rect(0px, 0px, 925px, 0px); }
  67. 50% { clip: rect(0px, 480px, 925px, 0px); }
  68. 100% { clip: rect(0px, 480px, 925px, 480px); }
  69. }
  70. @keyframes step3_line_l {
  71. 0% { clip: rect(0px, 0px, 925px, 0px); }
  72. 50% { clip: rect(0px, 480px, 925px, 0px); }
  73. 100% { clip: rect(0px, 480px, 925px, 480px); }
  74. }