A Pen by develost.com on CodePen.
Last active
August 26, 2015 15:56
-
-
Save develost/15b386f6ee80283ba5e0 to your computer and use it in GitHub Desktop.
Keyframes playgound demo 01
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><head> | |
| </head> | |
| <body> | |
| <div class="all-animations piece0">piece0</div> | |
| <div class="all-animations piece1">piece1</div> | |
| <div class="all-animations piece2">piece2</div> | |
| <div class="all-animations piece3">piece3</div> | |
| <div class="all-animations piece4">piece4</div> | |
| </body></html> |
A Pen by develost.com on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Generated by keyframes playground v 0.6.2 | |
| http://www.develost.com/apps/keyframes-playground/last | |
| Load the saved status and start modifying the animation | |
| --START saved status-- | |
| f3f2bd7f41183c0f93a79f684f5651be95a8e92cff1db26be1e0e7b11c6572cc:Ttu4jVnV+KY=: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 | |
| --END saved status-- | |
| */ | |
| body{overflow:hidden;} | |
| .all-animations{ | |
| -webkit-animation-duration:5s;-webkit-animation-fill-mode:both;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear; | |
| -moz-animation-duration:5s;-moz-animation-fill-mode:both;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear; | |
| -o-animation-duration:5s;-o-animation-fill-mode:both;-o-animation-iteration-count:infinite;-o-animation-timing-function:linear; | |
| animation-duration:5s;animation-fill-mode:both;animation-iteration-count:infinite;animation-timing-function:linear; | |
| position:absolute;overflow:hidden;opacity:0.5; | |
| } | |
| .piece0{-webkit-animation-name: piece0; background-color: grey;} | |
| @-webkit-keyframes piece0{ | |
| 0% {top:280px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 6.25% {top:280px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 12.5% {top:280px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 18.75% {top:280px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 25% {top:280px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 31.25% {top:280px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 37.5% {top:280px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 43.75% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 50% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 56.25% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 62.5% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 68.75% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 75% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 81.25% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 87.5% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 93.75% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 100% {top:280px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| } | |
| .piece1{-webkit-animation-name: piece1; background-color: grey;} | |
| @-webkit-keyframes piece1{ | |
| 0% {top:280px;left:102px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 6.25% {top:280px;left:102px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 12.5% {top:280px;left:102px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 18.75% {top:280px;left:102px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 25% {top:280px;left:102px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 31.25% {top:280px;left:102px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 37.5% {top:280px;left:102px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 43.75% {top:281px;left:250px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 50% {top:355px;left:230.90380859375px;width:400px;height:100px;-webkit-transform: rotate(30deg);} | |
| 56.25% {top:411.90380859375px;left:176px;width:400px;height:100px;-webkit-transform: rotate(60deg);} | |
| 62.5% {top:431px;left:102px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 68.75% {top:430px;left:101px;width:400px;height:100px;-webkit-transform: rotate(60deg);} | |
| 75% {top:430px;left:101px;width:400px;height:100px;-webkit-transform: rotate(30deg);} | |
| 81.25% {top:430px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 87.5% {top:430px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 93.75% {top:430px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 100% {top:280px;left:102px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| } | |
| .piece2{-webkit-animation-name: piece2; background-color: grey;} | |
| @-webkit-keyframes piece2{ | |
| 0% {top:180px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 6.25% {top:180px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 12.5% {top:180px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 18.75% {top:180px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 25% {top:180px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 31.25% {top:180px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 37.5% {top:180px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 43.75% {top:180px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 50% {top:180px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 56.25% {top:180px;left:102px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 62.5% {top:180px;left:102px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 68.75% {top:181px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 75% {top:181px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 81.25% {top:181px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 87.5% {top:181px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 93.75% {top:181px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 100% {top:180px;left:101px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| } | |
| .piece3{-webkit-animation-name: piece3; background-color: grey;} | |
| @-webkit-keyframes piece3{ | |
| 0% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 6.25% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 12.5% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 18.75% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 25% {top:205px;left:121.09619140625px;width:400px;height:100px;-webkit-transform: rotate(30deg);} | |
| 31.25% {top:150.09619140625px;left:177px;width:400px;height:100px;-webkit-transform: rotate(60deg);} | |
| 37.5% {top:129px;left:251px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 43.75% {top:129px;left:251px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 50% {top:131px;left:251px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 56.25% {top:131px;left:252px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 62.5% {top:131px;left:252px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 68.75% {top:132px;left:251px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 75% {top:132px;left:251px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 81.25% {top:132px;left:251px;width:400px;height:100px;-webkit-transform: rotate(90deg);} | |
| 87.5% {top:207px;left:121.09619140625px;width:400px;height:100px;-webkit-transform: rotate(30deg);} | |
| 93.75% {top:283px;left:100px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 100% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| } | |
| .piece4{-webkit-animation-name: piece4; background-color: grey;} | |
| @-webkit-keyframes piece4{ | |
| 0% {top:280px;left:102px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 6.25% {top:205px;left:79.90380859375px;width:400px;height:100px;-webkit-transform: rotate(-30deg);} | |
| 12.5% {top:150.09619140625px;left:25px;width:400px;height:100px;-webkit-transform: rotate(-60deg);} | |
| 18.75% {top:131px;left:-49px;width:400px;height:100px;-webkit-transform: rotate(-90deg);} | |
| 25% {top:131px;left:-49px;width:400px;height:100px;-webkit-transform: rotate(-90deg);} | |
| 31.25% {top:131px;left:-49px;width:400px;height:100px;-webkit-transform: rotate(-90deg);} | |
| 37.5% {top:131px;left:-49px;width:400px;height:100px;-webkit-transform: rotate(-90deg);} | |
| 43.75% {top:131px;left:-49px;width:400px;height:100px;-webkit-transform: rotate(-90deg);} | |
| 50% {top:131px;left:-49px;width:400px;height:100px;-webkit-transform: rotate(-90deg);} | |
| 56.25% {top:131px;left:-49px;width:400px;height:100px;-webkit-transform: rotate(-90deg);} | |
| 62.5% {top:131px;left:-49px;width:400px;height:100px;-webkit-transform: rotate(-90deg);} | |
| 68.75% {top:131px;left:-49px;width:400px;height:100px;-webkit-transform: rotate(-90deg);} | |
| 75% {top:131px;left:-49px;width:400px;height:100px;-webkit-transform: rotate(-90deg);} | |
| 81.25% {top:131px;left:-49px;width:400px;height:100px;-webkit-transform: rotate(-90deg);} | |
| 87.5% {top:205px;left:80.90380859375px;width:400px;height:100px;-webkit-transform: rotate(-30deg);} | |
| 93.75% {top:281px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| 100% {top:280px;left:101px;width:400px;height:100px;-webkit-transform: rotate(0deg);} | |
| } | |
| .piece0{-moz-animation-name: piece0; background-color: grey;} | |
| @-moz-keyframes piece0{ | |
| 0% {top:280px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 6.25% {top:280px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 12.5% {top:280px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 18.75% {top:280px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 25% {top:280px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 31.25% {top:280px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 37.5% {top:280px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 43.75% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 50% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 56.25% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 62.5% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 68.75% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 75% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 81.25% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 87.5% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 93.75% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 100% {top:280px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| } | |
| .piece1{-moz-animation-name: piece1; background-color: grey;} | |
| @-moz-keyframes piece1{ | |
| 0% {top:280px;left:102px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 6.25% {top:280px;left:102px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 12.5% {top:280px;left:102px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 18.75% {top:280px;left:102px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 25% {top:280px;left:102px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 31.25% {top:280px;left:102px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 37.5% {top:280px;left:102px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 43.75% {top:281px;left:250px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 50% {top:355px;left:230.90380859375px;width:400px;height:100px;-moz-transform: rotate(30deg);} | |
| 56.25% {top:411.90380859375px;left:176px;width:400px;height:100px;-moz-transform: rotate(60deg);} | |
| 62.5% {top:431px;left:102px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 68.75% {top:430px;left:101px;width:400px;height:100px;-moz-transform: rotate(60deg);} | |
| 75% {top:430px;left:101px;width:400px;height:100px;-moz-transform: rotate(30deg);} | |
| 81.25% {top:430px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 87.5% {top:430px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 93.75% {top:430px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 100% {top:280px;left:102px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| } | |
| .piece2{-moz-animation-name: piece2; background-color: grey;} | |
| @-moz-keyframes piece2{ | |
| 0% {top:180px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 6.25% {top:180px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 12.5% {top:180px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 18.75% {top:180px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 25% {top:180px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 31.25% {top:180px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 37.5% {top:180px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 43.75% {top:180px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 50% {top:180px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 56.25% {top:180px;left:102px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 62.5% {top:180px;left:102px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 68.75% {top:181px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 75% {top:181px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 81.25% {top:181px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 87.5% {top:181px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 93.75% {top:181px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 100% {top:180px;left:101px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| } | |
| .piece3{-moz-animation-name: piece3; background-color: grey;} | |
| @-moz-keyframes piece3{ | |
| 0% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 6.25% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 12.5% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 18.75% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 25% {top:205px;left:121.09619140625px;width:400px;height:100px;-moz-transform: rotate(30deg);} | |
| 31.25% {top:150.09619140625px;left:177px;width:400px;height:100px;-moz-transform: rotate(60deg);} | |
| 37.5% {top:129px;left:251px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 43.75% {top:129px;left:251px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 50% {top:131px;left:251px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 56.25% {top:131px;left:252px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 62.5% {top:131px;left:252px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 68.75% {top:132px;left:251px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 75% {top:132px;left:251px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 81.25% {top:132px;left:251px;width:400px;height:100px;-moz-transform: rotate(90deg);} | |
| 87.5% {top:207px;left:121.09619140625px;width:400px;height:100px;-moz-transform: rotate(30deg);} | |
| 93.75% {top:283px;left:100px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 100% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| } | |
| .piece4{-moz-animation-name: piece4; background-color: grey;} | |
| @-moz-keyframes piece4{ | |
| 0% {top:280px;left:102px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 6.25% {top:205px;left:79.90380859375px;width:400px;height:100px;-moz-transform: rotate(-30deg);} | |
| 12.5% {top:150.09619140625px;left:25px;width:400px;height:100px;-moz-transform: rotate(-60deg);} | |
| 18.75% {top:131px;left:-49px;width:400px;height:100px;-moz-transform: rotate(-90deg);} | |
| 25% {top:131px;left:-49px;width:400px;height:100px;-moz-transform: rotate(-90deg);} | |
| 31.25% {top:131px;left:-49px;width:400px;height:100px;-moz-transform: rotate(-90deg);} | |
| 37.5% {top:131px;left:-49px;width:400px;height:100px;-moz-transform: rotate(-90deg);} | |
| 43.75% {top:131px;left:-49px;width:400px;height:100px;-moz-transform: rotate(-90deg);} | |
| 50% {top:131px;left:-49px;width:400px;height:100px;-moz-transform: rotate(-90deg);} | |
| 56.25% {top:131px;left:-49px;width:400px;height:100px;-moz-transform: rotate(-90deg);} | |
| 62.5% {top:131px;left:-49px;width:400px;height:100px;-moz-transform: rotate(-90deg);} | |
| 68.75% {top:131px;left:-49px;width:400px;height:100px;-moz-transform: rotate(-90deg);} | |
| 75% {top:131px;left:-49px;width:400px;height:100px;-moz-transform: rotate(-90deg);} | |
| 81.25% {top:131px;left:-49px;width:400px;height:100px;-moz-transform: rotate(-90deg);} | |
| 87.5% {top:205px;left:80.90380859375px;width:400px;height:100px;-moz-transform: rotate(-30deg);} | |
| 93.75% {top:281px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| 100% {top:280px;left:101px;width:400px;height:100px;-moz-transform: rotate(0deg);} | |
| } | |
| .piece0{-o-animation-name: piece0; background-color: grey;} | |
| @-o-keyframes piece0{ | |
| 0% {top:280px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 6.25% {top:280px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 12.5% {top:280px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 18.75% {top:280px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 25% {top:280px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 31.25% {top:280px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 37.5% {top:280px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 43.75% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 50% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 56.25% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 62.5% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 68.75% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 75% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 81.25% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 87.5% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 93.75% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 100% {top:280px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| } | |
| .piece1{-o-animation-name: piece1; background-color: grey;} | |
| @-o-keyframes piece1{ | |
| 0% {top:280px;left:102px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 6.25% {top:280px;left:102px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 12.5% {top:280px;left:102px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 18.75% {top:280px;left:102px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 25% {top:280px;left:102px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 31.25% {top:280px;left:102px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 37.5% {top:280px;left:102px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 43.75% {top:281px;left:250px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 50% {top:355px;left:230.90380859375px;width:400px;height:100px;-o-transform: rotate(30deg);} | |
| 56.25% {top:411.90380859375px;left:176px;width:400px;height:100px;-o-transform: rotate(60deg);} | |
| 62.5% {top:431px;left:102px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 68.75% {top:430px;left:101px;width:400px;height:100px;-o-transform: rotate(60deg);} | |
| 75% {top:430px;left:101px;width:400px;height:100px;-o-transform: rotate(30deg);} | |
| 81.25% {top:430px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 87.5% {top:430px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 93.75% {top:430px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 100% {top:280px;left:102px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| } | |
| .piece2{-o-animation-name: piece2; background-color: grey;} | |
| @-o-keyframes piece2{ | |
| 0% {top:180px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 6.25% {top:180px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 12.5% {top:180px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 18.75% {top:180px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 25% {top:180px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 31.25% {top:180px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 37.5% {top:180px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 43.75% {top:180px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 50% {top:180px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 56.25% {top:180px;left:102px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 62.5% {top:180px;left:102px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 68.75% {top:181px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 75% {top:181px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 81.25% {top:181px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 87.5% {top:181px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 93.75% {top:181px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 100% {top:180px;left:101px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| } | |
| .piece3{-o-animation-name: piece3; background-color: grey;} | |
| @-o-keyframes piece3{ | |
| 0% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 6.25% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 12.5% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 18.75% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 25% {top:205px;left:121.09619140625px;width:400px;height:100px;-o-transform: rotate(30deg);} | |
| 31.25% {top:150.09619140625px;left:177px;width:400px;height:100px;-o-transform: rotate(60deg);} | |
| 37.5% {top:129px;left:251px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 43.75% {top:129px;left:251px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 50% {top:131px;left:251px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 56.25% {top:131px;left:252px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 62.5% {top:131px;left:252px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 68.75% {top:132px;left:251px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 75% {top:132px;left:251px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 81.25% {top:132px;left:251px;width:400px;height:100px;-o-transform: rotate(90deg);} | |
| 87.5% {top:207px;left:121.09619140625px;width:400px;height:100px;-o-transform: rotate(30deg);} | |
| 93.75% {top:283px;left:100px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 100% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| } | |
| .piece4{-o-animation-name: piece4; background-color: grey;} | |
| @-o-keyframes piece4{ | |
| 0% {top:280px;left:102px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 6.25% {top:205px;left:79.90380859375px;width:400px;height:100px;-o-transform: rotate(-30deg);} | |
| 12.5% {top:150.09619140625px;left:25px;width:400px;height:100px;-o-transform: rotate(-60deg);} | |
| 18.75% {top:131px;left:-49px;width:400px;height:100px;-o-transform: rotate(-90deg);} | |
| 25% {top:131px;left:-49px;width:400px;height:100px;-o-transform: rotate(-90deg);} | |
| 31.25% {top:131px;left:-49px;width:400px;height:100px;-o-transform: rotate(-90deg);} | |
| 37.5% {top:131px;left:-49px;width:400px;height:100px;-o-transform: rotate(-90deg);} | |
| 43.75% {top:131px;left:-49px;width:400px;height:100px;-o-transform: rotate(-90deg);} | |
| 50% {top:131px;left:-49px;width:400px;height:100px;-o-transform: rotate(-90deg);} | |
| 56.25% {top:131px;left:-49px;width:400px;height:100px;-o-transform: rotate(-90deg);} | |
| 62.5% {top:131px;left:-49px;width:400px;height:100px;-o-transform: rotate(-90deg);} | |
| 68.75% {top:131px;left:-49px;width:400px;height:100px;-o-transform: rotate(-90deg);} | |
| 75% {top:131px;left:-49px;width:400px;height:100px;-o-transform: rotate(-90deg);} | |
| 81.25% {top:131px;left:-49px;width:400px;height:100px;-o-transform: rotate(-90deg);} | |
| 87.5% {top:205px;left:80.90380859375px;width:400px;height:100px;-o-transform: rotate(-30deg);} | |
| 93.75% {top:281px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| 100% {top:280px;left:101px;width:400px;height:100px;-o-transform: rotate(0deg);} | |
| } | |
| .piece0{animation-name: piece0; background-color: grey;} | |
| @keyframes piece0{ | |
| 0% {top:280px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 6.25% {top:280px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 12.5% {top:280px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 18.75% {top:280px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 25% {top:280px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 31.25% {top:280px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 37.5% {top:280px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 43.75% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 50% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 56.25% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 62.5% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 68.75% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 75% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 81.25% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 87.5% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 93.75% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 100% {top:280px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| } | |
| .piece1{animation-name: piece1; background-color: grey;} | |
| @keyframes piece1{ | |
| 0% {top:280px;left:102px;width:400px;height:100px;transform: rotate(0deg);} | |
| 6.25% {top:280px;left:102px;width:400px;height:100px;transform: rotate(0deg);} | |
| 12.5% {top:280px;left:102px;width:400px;height:100px;transform: rotate(0deg);} | |
| 18.75% {top:280px;left:102px;width:400px;height:100px;transform: rotate(0deg);} | |
| 25% {top:280px;left:102px;width:400px;height:100px;transform: rotate(0deg);} | |
| 31.25% {top:280px;left:102px;width:400px;height:100px;transform: rotate(0deg);} | |
| 37.5% {top:280px;left:102px;width:400px;height:100px;transform: rotate(0deg);} | |
| 43.75% {top:281px;left:250px;width:400px;height:100px;transform: rotate(0deg);} | |
| 50% {top:355px;left:230.90380859375px;width:400px;height:100px;transform: rotate(30deg);} | |
| 56.25% {top:411.90380859375px;left:176px;width:400px;height:100px;transform: rotate(60deg);} | |
| 62.5% {top:431px;left:102px;width:400px;height:100px;transform: rotate(90deg);} | |
| 68.75% {top:430px;left:101px;width:400px;height:100px;transform: rotate(60deg);} | |
| 75% {top:430px;left:101px;width:400px;height:100px;transform: rotate(30deg);} | |
| 81.25% {top:430px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 87.5% {top:430px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 93.75% {top:430px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 100% {top:280px;left:102px;width:400px;height:100px;transform: rotate(0deg);} | |
| } | |
| .piece2{animation-name: piece2; background-color: grey;} | |
| @keyframes piece2{ | |
| 0% {top:180px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 6.25% {top:180px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 12.5% {top:180px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 18.75% {top:180px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 25% {top:180px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 31.25% {top:180px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 37.5% {top:180px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 43.75% {top:180px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 50% {top:180px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 56.25% {top:180px;left:102px;width:400px;height:100px;transform: rotate(90deg);} | |
| 62.5% {top:180px;left:102px;width:400px;height:100px;transform: rotate(90deg);} | |
| 68.75% {top:181px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 75% {top:181px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 81.25% {top:181px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 87.5% {top:181px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 93.75% {top:181px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| 100% {top:180px;left:101px;width:400px;height:100px;transform: rotate(90deg);} | |
| } | |
| .piece3{animation-name: piece3; background-color: grey;} | |
| @keyframes piece3{ | |
| 0% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 6.25% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 12.5% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 18.75% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 25% {top:205px;left:121.09619140625px;width:400px;height:100px;transform: rotate(30deg);} | |
| 31.25% {top:150.09619140625px;left:177px;width:400px;height:100px;transform: rotate(60deg);} | |
| 37.5% {top:129px;left:251px;width:400px;height:100px;transform: rotate(90deg);} | |
| 43.75% {top:129px;left:251px;width:400px;height:100px;transform: rotate(90deg);} | |
| 50% {top:131px;left:251px;width:400px;height:100px;transform: rotate(90deg);} | |
| 56.25% {top:131px;left:252px;width:400px;height:100px;transform: rotate(90deg);} | |
| 62.5% {top:131px;left:252px;width:400px;height:100px;transform: rotate(90deg);} | |
| 68.75% {top:132px;left:251px;width:400px;height:100px;transform: rotate(90deg);} | |
| 75% {top:132px;left:251px;width:400px;height:100px;transform: rotate(90deg);} | |
| 81.25% {top:132px;left:251px;width:400px;height:100px;transform: rotate(90deg);} | |
| 87.5% {top:207px;left:121.09619140625px;width:400px;height:100px;transform: rotate(30deg);} | |
| 93.75% {top:283px;left:100px;width:400px;height:100px;transform: rotate(0deg);} | |
| 100% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| } | |
| .piece4{animation-name: piece4; background-color: grey;} | |
| @keyframes piece4{ | |
| 0% {top:280px;left:102px;width:400px;height:100px;transform: rotate(0deg);} | |
| 6.25% {top:205px;left:79.90380859375px;width:400px;height:100px;transform: rotate(-30deg);} | |
| 12.5% {top:150.09619140625px;left:25px;width:400px;height:100px;transform: rotate(-60deg);} | |
| 18.75% {top:131px;left:-49px;width:400px;height:100px;transform: rotate(-90deg);} | |
| 25% {top:131px;left:-49px;width:400px;height:100px;transform: rotate(-90deg);} | |
| 31.25% {top:131px;left:-49px;width:400px;height:100px;transform: rotate(-90deg);} | |
| 37.5% {top:131px;left:-49px;width:400px;height:100px;transform: rotate(-90deg);} | |
| 43.75% {top:131px;left:-49px;width:400px;height:100px;transform: rotate(-90deg);} | |
| 50% {top:131px;left:-49px;width:400px;height:100px;transform: rotate(-90deg);} | |
| 56.25% {top:131px;left:-49px;width:400px;height:100px;transform: rotate(-90deg);} | |
| 62.5% {top:131px;left:-49px;width:400px;height:100px;transform: rotate(-90deg);} | |
| 68.75% {top:131px;left:-49px;width:400px;height:100px;transform: rotate(-90deg);} | |
| 75% {top:131px;left:-49px;width:400px;height:100px;transform: rotate(-90deg);} | |
| 81.25% {top:131px;left:-49px;width:400px;height:100px;transform: rotate(-90deg);} | |
| 87.5% {top:205px;left:80.90380859375px;width:400px;height:100px;transform: rotate(-30deg);} | |
| 93.75% {top:281px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| 100% {top:280px;left:101px;width:400px;height:100px;transform: rotate(0deg);} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment