Guest User

css

a guest
Jun 30th, 2016
532
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <body>
  3. <style>
  4. body {
  5.   font-size: 0;
  6.   background: #135569;
  7. }
  8.  
  9. ul {
  10.   display: inline-block;
  11.   width: 16rem;
  12. }
  13.  
  14. li {
  15.   background: #dedfee;
  16.   height: 200px;
  17.   width: 200px;
  18.   display: block;
  19.   margin: 80px 0 80px 80px;
  20.   border-radius: 1rem;
  21. }
  22. .css.activated li {
  23.   background: #d05f5e;
  24.   -webkit-animation: translation 3s 0s infinite linear;
  25.           animation: translation 3s 0s infinite linear;
  26. }
  27.  
  28. @-webkit-keyframes translation {
  29.   0% {
  30.     -webkit-transform: rotate(0deg);
  31.             transform: rotate(0deg);
  32.   }
  33.   8% {
  34.     -webkit-transform: rotate(-12deg);
  35.             transform: rotate(-12deg);
  36.   }
  37.   30% {
  38.     -webkit-transform: rotate(270deg);
  39.             transform: rotate(270deg);
  40.   }
  41.   55% {
  42.     -webkit-transform: rotate(-40deg);
  43.             transform: rotate(-40deg);
  44.   }
  45.   80% {
  46.     -webkit-transform: rotate(70deg);
  47.             transform: rotate(70deg);
  48.   }
  49.   92% {
  50.     -webkit-transform: rotate(-13deg);
  51.             transform: rotate(-13deg);
  52.   }
  53.   100% {
  54.     -webkit-transform: rotate(0deg);
  55.             transform: rotate(0deg);
  56.   }
  57. }
  58.  
  59. @keyframes translation {
  60.   0% {
  61.     -webkit-transform: rotate(0deg);
  62.             transform: rotate(0deg);
  63.   }
  64.   8% {
  65.     -webkit-transform: rotate(-12deg);
  66.             transform: rotate(-12deg);
  67.   }
  68.   30% {
  69.     -webkit-transform: rotate(270deg);
  70.             transform: rotate(270deg);
  71.   }
  72.   55% {
  73.     -webkit-transform: rotate(-40deg);
  74.             transform: rotate(-40deg);
  75.   }
  76.   80% {
  77.     -webkit-transform: rotate(70deg);
  78.             transform: rotate(70deg);
  79.   }
  80.   92% {
  81.     -webkit-transform: rotate(-13deg);
  82.             transform: rotate(-13deg);
  83.   }
  84.   100% {
  85.     -webkit-transform: rotate(0deg);
  86.             transform: rotate(0deg);
  87.   }
  88. }
  89. </style>
  90. <ul class="js">
  91.   <li>1</li>
  92.   <li>1</li>
  93. </ul>
  94. <ul class="css">
  95.   <li>6</li>
  96.   <li>6</li>
  97. </ul>
  98.  
  99. <script>
  100. var elements = document.querySelectorAll('.js li');
  101. var animations = [];
  102.  
  103. for (var i = 0, len = elements.length; i < len; ++i) {
  104.  var animation = elements[i].animate([
  105.    { transform: 'rotate(0deg)', offset: 0 },
  106.    { transform: 'rotate(-12deg)', offset: .08 },
  107.    { transform: 'rotate(270deg)', offset: .3 },
  108.    { transform: 'rotate(-40deg)', offset: .55 },
  109.    { transform: 'rotate(70deg)', offset: .8 },
  110.    { transform: 'rotate(-13deg)', offset: .92 },
  111.    { transform: 'rotate(0deg)', offset: 1 }
  112.  ], {
  113.    duration: 3000,
  114.    iterations: Infinity,
  115.    easing: 'linear',
  116.    delay: 0
  117.  });
  118.  
  119.  animations.push(animation);
  120. }
  121. document.querySelector('.css').classList.add('activated');
  122. </script>
  123. </body>
  124. </html>
RAW Paste Data