Advertisement
Guest User

Bouncy letters

a guest
Feb 11th, 2024
316
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.24 KB | None | 0 0
  1. <style>
  2. .bouncyyy { color: white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #232323; font-size:1.5em; z-index: 99; animation: bounce 3s infinite; animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1) width:auto; ;}
  3. .letterone { animation-delay:0s; display:inline-block;}
  4. .lettertwo { animation-delay:0.2s; display:inline-block;}
  5. .letterthree { animation-delay:0.4s; display:inline-block; }
  6. .letterfour { animation-delay:0.6s; display:inline-block;}
  7. .letterfive { animation-delay:0.8s; display:inline-block;} .lettersix { animation-delay:1s; display:inline-block;}
  8. .letterseven { animation-delay:1.2s; display:inline-block;}
  9. .lettereight { animation-delay:1.4s; display:inline-block;}
  10. @keyframes bounce { 0% { transform: scale(1,1) translateY(0); } 10% { transform: scale(1.1,.9) translateY(0); } 30% { transform: scale(.9,1.1) translateY(-30px); } 50% { transform: scale(1.05,.95) translateY(0); } 60% { transform: scale(1,1) translateY(-4px); } 100% { transform: scale(1,1) translateY(0); } }
  11. </style>
  12. <p class="bouncyyy letterone">b</p>
  13. <p class="bouncyyy lettertwo">o</p>
  14. <p class="bouncyyy letterthree">u</p>
  15. <p class="bouncyyy letterfour">n</p>
  16. <p class="bouncyyy letterfive">c</p>
  17. <p class="bouncyyy lettersix">y</p>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement