SHARE
TWEET

CSS @keyframes

1xptolevitico69 Nov 11th, 2019 90 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width">
  7. <style>
  8.  
  9.   #div {  border:50px solid red;display:inline-block;
  10.           animation:anime 7s linear infinite 1s;  }
  11.  
  12.   @keyframes anime {
  13.          10%{transform:translate(0)rotate(0);}
  14.          40%{transform:translate(1250px,500px)rotate(360deg);}
  15.          60%{transform:translate(1250px,500px)rotate(360deg);}
  16.          90%{transform:translate(0)rotate(0);}
  17.        }
  18.  
  19. </style>
  20. </head>
  21. <body>
  22.  
  23. <div id='div'></div>
  24.  
  25. </body>
  26. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top