[RESOLU] Animation qui boucle avant la fin

Animation qui boucle avant la fin [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 19-04-2020 à 20:24:05    

Bonjour à tous,
 
J'ai une animation à la "Star Wars" (voir ci-dessous) qui boucle (c'est très bien) avant de finir la première boucle (c'est beaucoup moins bien...).
Pour illustrer, j'ai fait des paragraphes A à K, l'animation s'arrête au milieu du paragraphe J puis reboucle au départ.
Je peux faire varier la durée de l'animation donc la vitesse de défilement mais pas la taille de son contenu.
Est-ce qu'il y a une limite de volume de texte scrollable dans cette animation ? Si oui, d'où provient-elle et est-ce modifiable ?  
 
Merci d'avance.
 
Dabizi
 

Code :
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>FAILS !</title>
  6. <style>
  7. @import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
  8. body { margin: 0; background-color: black; }
  9. p#start { position: relative; width: 80%; font-size: 300%; font-weight: 400;
  10. margin: 20% auto; color: yellow; opacity: 0; z-index: 1; text-align: center;
  11. -webkit-animation: intro 2s ease-out; -moz-animation: intro 2s ease-out;
  12. -ms-animation: intro 2s ease-out; -o-animation: intro 2s ease-out; animation: intro 2s ease-out; }
  13. p { color: #FFFF82; }
  14. .board { font-family: "Droid Sans", arial, verdana, sans-serif;
  15. transform: perspective(300px) rotateX(25deg); transform-origin: 50% 100%;
  16. text-align: justify; position: absolute; margin-left: -9em; font-weight: bold;
  17. overflow: hidden; font-size: 350%; height: 50em; width: 18em; bottom: 0; left: 50%; }
  18. .board:after {position: absolute; content: ' '; bottom: 60%; left: 0; right: 0; top: 0;}
  19. /* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
  20. .content { animation: scroll 80s linear 1s infinite; position: absolute; top: 100%; }
  21. .footer {padding-bottom: 400px;}
  22. .small {font-size: smaller; font-style:italic;}
  23. .title, .subtitle { text-align: center; }
  24. .title2 { text-align: center; padding-top: 200px;}
  25. @keyframes intro { 0% { opacity: 0; } 20% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
  26. @-webkit-keyframes logo {  0% { -webkit-transform: scale(1); opacity: 1; }  50% { opacity: 1; }  100% { -webkit-transform: scale(0.1); opacity: 0; }  }
  27. @-moz-keyframes logo {  0% { -moz-transform: scale(1); opacity: 1; }  50% { opacity: 1; }  100% { -moz-transform: scale(0.1); opacity: 0; }  }
  28. @-ms-keyframes logo {  0% { -ms-transform: scale(1); opacity: 1; }  50% { opacity: 1; }  100% { -ms-transform: scale(0.1); opacity: 0; }  }
  29. @-o-keyframes logo {  0% { -o-transform: scale(1); opacity: 1; }  50% { opacity: 1; }  100% { -o-transform: scale(0.1); opacity: 0; }  }
  30. @keyframes logo {  0% { transform: scale(1); opacity: 1; }  50% { opacity: 1; }  100% { transform: scale(0.1); opacity: 0; }  }
  31. @keyframes scroll { 0% { top: 100%; } 100% { top: -170%; } }
  32. </style>
  33. </head>
  34. <body translate="no">
  35. <p id="start">PARAGRAPHES A &agrave; K :<br>boucle avant la fin !</p>
  36. <div class="board">
  37. <div class="content">
  38. <p class="title">A &agrave; C : OK</p>
  39. <p>
  40. aaaaa aaaaa aaaaa aaa aaaa, aaaaaaaaaaa aaaaaaaaaa aaaa. Aaaaaa aaaaaa aaaaaaaaa aaaa aa aaaaaaa. aaa aaa aaaa aaaaa aaaaaaa, aaaaaa aaaaaa aaaa, aaaaaaaaa aaaaa. aaaa aaaaaaaa aaaaaaa aaaaaaaaa. aaaaaaaaa aaaaaaaaa aaaaaaa aaaaaa, aa aaaaaaaaa aaaaa aaaaaaa aa. aaaa aaaaaa, aaaaaa aaa aaaaaa aaaaaaa.
  41. </p>
  42. <p>
  43. bbbbb bbbbb bbbbb bbb bbbb, bbbbbbbbbbb bbbbbbbbbb bbbb. bbbbbb bbbbbb bbbbbbbbb bbbb bb bbbbbbb. bbb bbb bbbb bbbbb bbbbbbb, bbbbbb bbbbbb bbbb, bbbbbbbbb bbbbb. bbbb bbbbbbbb bbbbbbb bbbbbbbbb. bbbbbbbbb bbbbbbbbb bbbbbbb bbbbbb, bb bbbbbbbbb bbbbb bbbbbbb bb. bbbb bbbbbb, bbbbbb bbb bbbbbb bbbbbbb.
  44. </p>
  45. <p>
  46. ccccc ccccc ccccc ccc cccc, ccccccccccc cccccccccc cccc. cccccc cccccc ccccccccc cccc cc ccccccc. ccc ccc cccc ccccc ccccccc, cccccc cccccc cccc, ccccccccc ccccc. cccc cccccccc ccccccc ccccccccc. ccccccccc ccccccccc ccccccc cccccc, cc ccccccccc ccccc ccccccc cc. cccc cccccc, cccccc ccc cccccc ccccccc.
  47. </p>
  48. <p class="title2">D &agrave; F : OK</p>
  49. <p>
  50. ddddd ddddd ddddd ddd dddd, ddddddddddd dddddddddd dddd. dddddd dddddd ddddddddd dddd dd ddddddd. ddd ddd dddd ddddd ddddddd, dddddd dddddd dddd, ddddddddd ddddd. dddd dddddddd ddddddd ddddddddd. ddddddddd ddddddddd ddddddd dddddd, dd ddddddddd ddddd ddddddd dd. dddd dddddd, dddddd ddd dddddd ddddddd.
  51. </p>
  52. <p>
  53. eeeee eeeee eeeee eee eeee, eeeeeeeeeee eeeeeeeeee eeee. eeeeee eeeeee eeeeeeeee eeee ee eeeeeee. eee eee eeee eeeee eeeeeee, eeeeee eeeeee eeee, eeeeeeeee eeeee. eeee eeeeeeee eeeeeee eeeeeeeee. eeeeeeeee eeeeeeeee eeeeeee eeeeee, ee eeeeeeeee eeeee eeeeeee ee. eeee eeeeee, eeeeee eee eeeeee eeeeeee.
  54. </p>
  55. <p>
  56. fffff fffff fffff fff ffff, fffffffffff ffffffffff ffff. ffffff ffffff fffffffff ffff ff fffffff. fff fff ffff fffff fffffff, ffffff ffffff ffff, fffffffff fffff. ffff ffffffff fffffff fffffffff. fffffffff fffffffff fffffff ffffff, ff fffffffff fffff fffffff ff. ffff ffffff, ffffff fff ffffff fffffff.
  57. </p>
  58. <p class="title2">G &agrave; H : OK</p>
  59. <p>
  60. ggggg ggggg ggggg ggg gggg, ggggggggggg gggggggggg gggg. gggggg gggggg ggggggggg gggg gg ggggggg. ggg ggg gggg ggggg ggggggg, gggggg gggggg gggg, ggggggggg ggggg. gggg gggggggg ggggggg ggggggggg. ggggggggg ggggggggg ggggggg gggggg, gg ggggggggg ggggg ggggggg gg. gggg gggggg, gggggg ggg gggggg ggggggg.
  61. </p>
  62. <p>
  63. hhhhh hhhhh hhhhh hhh hhhh, hhhhhhhhhhh hhhhhhhhhh hhhh. hhhhhh hhhhhh hhhhhhhhh hhhh hh hhhhhhh. hhh hhh hhhh hhhhh hhhhhhh, hhhhhh hhhhhh hhhh, hhhhhhhhh hhhhh. hhhh hhhhhhhh hhhhhhh hhhhhhhhh. hhhhhhhhh hhhhhhhhh hhhhhhh hhhhhh, hh hhhhhhhhh hhhhh hhhhhhh hh. hhhh hhhhhh, hhhhhh hhh hhhhhh hhhhhhh.
  64. </p>
  65. <p class="title2">I &agrave; K : BOIIIING ! KO !</p>
  66. <p>
  67. iiiii iiiii iiiii iii iiii, iiiiiiiiiii iiiiiiiiii iiii. iiiiii iiiiii iiiiiiiii iiii ii iiiiiii. iii iii iiii iiiii iiiiiii, iiiiii iiiiii iiii, iiiiiiiii iiiii. iiii iiiiiiii iiiiiii iiiiiiiii. iiiiiiiii iiiiiiiii iiiiiii iiiiii, ii iiiiiiiii iiiii iiiiiii ii. iiii iiiiii, iiiiii iii iiiiii iiiiiii.
  68. </p>
  69. <p>
  70. jjjjj jjjjj jjjjj jjj jjjj, jjjjjjjjjjj jjjjjjjjjj jjjj. jjjjjj jjjjjj jjjjjjjjj jjjj jj jjjjjjj. jjj jjj jjjj jjjjj jjjjjjj, jjjjjj jjjjjj jjjj, jjjjjjjjj jjjjj. jjjj jjjjjjjj jjjjjjj jjjjjjjjj. jjjjjjjjj jjjjjjjjj jjjjjjj jjjjjj, jj jjjjjjjjj jjjjj jjjjjjj jj. jjjj jjjjjj, jjjjjj jjj jjjjjj jjjjjjj.
  71. </p>
  72. <p>
  73. kkkkk kkkkk kkkkk kkk kkkk, kkkkkkkkkkk kkkkkkkkkk kkkk. kkkkkk kkkkkk kkkkkkkkk kkkk kk kkkkkkk. kkk kkk kkkk kkkkk kkkkkkk, kkkkkk kkkkkk kkkk, kkkkkkkkk kkkkk. kkkk kkkkkkkk kkkkkkk kkkkkkkkk. kkkkkkkkk kkkkkkkkk kkkkkkk kkkkkk, kk kkkkkkkkk kkkkk kkkkkkk kk. kkkk kkkkkk, kkkkkk kkk kkkkkk kkkkkkk.
  74. </p>
  75. </div>
  76. </div>
  77. </body>
  78. </html>


Message édité par dabizi le 20-04-2020 à 01:58:55
Reply

Marsh Posté le 19-04-2020 à 20:24:05   

Reply

Marsh Posté le 19-04-2020 à 22:46:39    

j'ai pas bien tout compris mais
ligne 31 tu remplaces -170% par -300%

Message cité 1 fois
Reply

Marsh Posté le 20-04-2020 à 01:58:02    

citation a écrit :

j'ai pas bien tout compris mais ligne 31 tu remplaces -170% par -300%


Super, ça le fait !  
En rajoutant des "paragraphes" (jusqu'à "z" ) et en mettant -700% ça fonctionne à merveille. Encore le syndrome du nez dans le guidon, je suppose.
 
Merci  :hello:  

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed