Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <body>
- <style>
- body {
- font-size: 0;
- background: #135569;
- }
- ul {
- display: inline-block;
- width: 16rem;
- }
- li {
- background: #dedfee;
- height: 200px;
- width: 200px;
- display: block;
- margin: 80px 0 80px 80px;
- border-radius: 1rem;
- }
- .css.activated li {
- background: #d05f5e;
- -webkit-animation: translation 3s 0s infinite linear;
- animation: translation 3s 0s infinite linear;
- }
- @-webkit-keyframes translation {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 8% {
- -webkit-transform: rotate(-12deg);
- transform: rotate(-12deg);
- }
- 30% {
- -webkit-transform: rotate(270deg);
- transform: rotate(270deg);
- }
- 55% {
- -webkit-transform: rotate(-40deg);
- transform: rotate(-40deg);
- }
- 80% {
- -webkit-transform: rotate(70deg);
- transform: rotate(70deg);
- }
- 92% {
- -webkit-transform: rotate(-13deg);
- transform: rotate(-13deg);
- }
- 100% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- }
- @keyframes translation {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 8% {
- -webkit-transform: rotate(-12deg);
- transform: rotate(-12deg);
- }
- 30% {
- -webkit-transform: rotate(270deg);
- transform: rotate(270deg);
- }
- 55% {
- -webkit-transform: rotate(-40deg);
- transform: rotate(-40deg);
- }
- 80% {
- -webkit-transform: rotate(70deg);
- transform: rotate(70deg);
- }
- 92% {
- -webkit-transform: rotate(-13deg);
- transform: rotate(-13deg);
- }
- 100% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- }
- </style>
- <ul class="js">
- <li>1</li>
- <li>1</li>
- </ul>
- <ul class="css">
- <li>6</li>
- <li>6</li>
- </ul>
- <script>
- var elements = document.querySelectorAll('.js li');
- var animations = [];
- for (var i = 0, len = elements.length; i < len; ++i) {
- var animation = elements[i].animate([
- { transform: 'rotate(0deg)', offset: 0 },
- { transform: 'rotate(-12deg)', offset: .08 },
- { transform: 'rotate(270deg)', offset: .3 },
- { transform: 'rotate(-40deg)', offset: .55 },
- { transform: 'rotate(70deg)', offset: .8 },
- { transform: 'rotate(-13deg)', offset: .92 },
- { transform: 'rotate(0deg)', offset: 1 }
- ], {
- duration: 3000,
- iterations: Infinity,
- easing: 'linear',
- delay: 0
- });
- animations.push(animation);
- }
- document.querySelector('.css').classList.add('activated');
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement