Advertisement
ukamori

sideways bounce text

Jun 30th, 2022
1,867
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.50 KB | None | 0 0
  1. <style>
  2. @font-face {
  3. font-family:'cupcake';
  4. src: url(https://dl.dropbox.com/s/dayh8onbivwmqq7/Cherry%20Cupcake%20Personal%20Use.ttf);
  5. }
  6.   .bouncyyy {
  7.   font-family:'cupcake';
  8.     font-size: 4em;
  9.     z-index: 99;
  10.     color: white;    
  11.     filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(2px 0 black);
  12.     animation: bounce 2s infinite;
  13.     animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1) width:auto;
  14.     ;
  15.   }
  16.  
  17.   .letterone {
  18.    
  19.     animation-delay: 0s;
  20.     display: inline-block;
  21.   }
  22.  
  23.   .lettertwo {
  24.    
  25.     animation-delay: 0.1s;
  26.     display: inline-block;
  27.   }
  28.  
  29.   .letterthree {
  30.    
  31.     animation-delay: 0.15s;
  32.     display: inline-block;
  33.   }
  34.  
  35.   .letterfour {
  36.    
  37.     animation-delay: 0.2s;
  38.     display: inline-block;
  39.   }
  40.  
  41.   @keyframes bounce {
  42.     0% {
  43.       transform: scale(1, 1) translateY(0);
  44.     }
  45.  
  46.     10% {
  47.       transform: scale(1.1, .9) translateY(0);
  48.  
  49.     }
  50.  
  51.     30% {
  52.       transform: scale(.9, 1.1) translateY(-30px);
  53.       transform: rotate(-10deg);
  54.     }
  55.  
  56.     50% {
  57.       transform: scale(1.05, .95) translateY(0);
  58.       transform: rotate(10deg);
  59.     }
  60.  
  61.     60% {
  62.       transform: scale(1, 1) translateY(-4px);
  63.       transform: rotate(-10deg);
  64.     }
  65.  
  66.     100% {
  67.       transform: scale(1, 1) translateY(0);
  68.     }
  69.   }
  70.  
  71. </style>
  72.  
  73. <p class="bouncyyy letterone">u</p><p class="bouncyyy lettertwo">k</p><p class="bouncyyy letterthree">a</p><p class="bouncyyy letterfour">!</p>
  74.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement