Advertisement
dianakko

bouncy text erika crd

Oct 21st, 2021
257
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.11 KB | None | 0 0
  1. <style>
  2. .bouncyyy {
  3. position: relative;
  4. top:2.7em;
  5. font-size:4em;
  6. animation: bounce 2s infinite;
  7. animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1) width: auto; ;
  8. color: #FFE5E8;
  9. }
  10.  
  11. .letterone { animation-delay:0s; display:inline-block;} .lettertwo { animation-delay:0.2s; display:inline-block;} .letterthree { animation-delay:0.4s; display:inline-block;} .letterfour { animation-delay:0.6s; display:inline-block;} .letterfive { animation-delay:0.8s; display:inline-block;} .lettersix { animation-delay:1s; display:inline-block;} .letterseven { animation-delay:1.2s; display:inline-block;} .lettereight { animation-delay:1.4s; display:inline-block;}
  12.  
  13. @keyframes
  14. bounce { 0% { transform: scale(1,1) translateY(0); }
  15. 10% { transform: scale(1.1,.9) translateY(0); }
  16. 30% { transform: scale(.9,1.1) translateY(-30px); }
  17. 50% { transform: scale(1.05,.95) translateY(0); }
  18. 60% { transform: scale(1,1) translateY(-4px); }
  19. 100% { transform: scale(1,1) translateY(0); } } }
  20.  
  21. </style>
  22.  
  23. <p class="bouncyyy letterone">o</p>
  24. <p class="bouncyyy lettertwo">l</p>
  25. <p class="bouncyyy letterthree">a</p>
  26.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement