Skip to content

Instantly share code, notes, and snippets.

@develost

develost/Keyframes playground - engine demo.markdown

Created August 27, 2015 11:42
Show Gist options
  • Save develost/2280e2b709a77876fb4e to your computer and use it in GitHub Desktop.
Save develost/2280e2b709a77876fb4e to your computer and use it in GitHub Desktop.
Download ZIP
Keyframes playground - engine demo
Raw
index.html
<html>
<body>
<div class="all-animations piece1">piece1</div>
<div class="all-animations piece3">piece3</div>
<div class="all-animations piece4">piece4</div>
<div class="all-animations piece5">piece5</div>
</body></html>
Raw
Keyframes playground - engine demo.markdown
Raw
style.css
/*
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--
ecb5daffd80a8bd4b223831a135271e54a1de650bb37ec7f4cd2d9cb300da16f:dDrAGrMUQOQ=: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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;
}
.piece1{-webkit-animation-name: piece1; background-color: grey;}
@-webkit-keyframes piece1{
0% {top:199px;left:460px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
8.33% {top:197.15148925781px;left:463.85107421875px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
16.67% {top:199.21516418457px;left:478.38763427734px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
25% {top:199.90660095215px;left:503.29925537109px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
33.33% {top:200.07453918457px;left:527.66888427734px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
41.67% {top:199.77648925781px;left:550.39794921875px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
50% {top:197.296875px;left:555.5px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
58.33% {top:203.48965454102px;left:551.50958251953px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
66.67% {top:197.62403869629px;left:530.58709716797px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
75% {top:198.17544555664px;left:504.20013427734px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
83.33% {top:198.68653869629px;left:479.36834716797px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
91.67% {top:201.34902954102px;left:464.10336303711px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
100% {top:197.71875px;left:457.859375px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
}
.piece3{-webkit-animation-name: piece3; background-color: grey;}
@-webkit-keyframes piece3{
0% {top:198px;left:159px;width:400px;height:100px;-webkit-transform: rotate(180deg);}
8.33% {top:185.07336425781px;left:164.12794494629px;width:400px;height:100px;-webkit-transform: rotate(185deg);}
16.67% {top:177.16390991211px;left:181.15324401855px;width:400px;height:100px;-webkit-transform: rotate(189deg);}
25% {top:174.04722595215px;left:206.72116088867px;width:400px;height:100px;-webkit-transform: rotate(190deg);}
33.33% {top:177.16390991211px;left:231.15325927734px;width:400px;height:100px;-webkit-transform: rotate(189deg);}
41.67% {top:186.07336425781px;left:251.73046875px;width:400px;height:100px;-webkit-transform: rotate(185deg);}
50% {top:198px;left:257px;width:400px;height:100px;-webkit-transform: rotate(180deg);}
58.33% {top:214.53652954102px;left:250.93588256836px;width:400px;height:100px;-webkit-transform: rotate(176deg);}
66.67% {top:219.42529296875px;left:231.54022216797px;width:400px;height:100px;-webkit-transform: rotate(172deg);}
75% {top:223.53482055664px;left:206.15324401855px;width:400px;height:100px;-webkit-transform: rotate(171deg);}
83.33% {top:219.42529296875px;left:181.54020690918px;width:400px;height:100px;-webkit-transform: rotate(172deg);}
91.67% {top:211.53652954102px;left:164.33334350586px;width:400px;height:100px;-webkit-transform: rotate(176deg);}
100% {top:198px;left:157px;width:400px;height:100px;-webkit-transform: rotate(180deg);}
}
.piece4{-webkit-animation-name: piece4; background-color: grey;}
@-webkit-keyframes piece4{
0% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(-180deg);}
8.33% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(-150deg);}
16.67% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(-120deg);}
25% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(-90deg);}
33.33% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(-60deg);}
41.67% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(-30deg);}
50% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(0deg);}
58.33% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(30deg);}
66.67% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(60deg);}
75% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
83.33% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(120deg);}
91.67% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(150deg);}
100% {top:198px;left:158px;width:200px;height:100px;-webkit-transform: rotate(180deg);}
}
.piece5{-webkit-animation-name: piece5; background-color: grey;}
@-webkit-keyframes piece5{
0% {top:190px;left:610px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
8.33% {top:190px;left:610px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
16.67% {top:190px;left:610px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
25% {top:190px;left:610px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
33.33% {top:191px;left:609px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
41.67% {top:191px;left:609px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
50% {top:191px;left:609px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
58.33% {top:191px;left:609px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
66.67% {top:191px;left:609px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
75% {top:191px;left:609px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
83.33% {top:191px;left:609px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
91.67% {top:191px;left:609px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
100% {top:191px;left:609px;width:200px;height:100px;-webkit-transform: rotate(90deg);}
}
.piece1{-moz-animation-name: piece1; background-color: grey;}
@-moz-keyframes piece1{
0% {top:199px;left:460px;width:200px;height:100px;-moz-transform: rotate(180deg);}
8.33% {top:197.15148925781px;left:463.85107421875px;width:200px;height:100px;-moz-transform: rotate(180deg);}
16.67% {top:199.21516418457px;left:478.38763427734px;width:200px;height:100px;-moz-transform: rotate(180deg);}
25% {top:199.90660095215px;left:503.29925537109px;width:200px;height:100px;-moz-transform: rotate(180deg);}
33.33% {top:200.07453918457px;left:527.66888427734px;width:200px;height:100px;-moz-transform: rotate(180deg);}
41.67% {top:199.77648925781px;left:550.39794921875px;width:200px;height:100px;-moz-transform: rotate(180deg);}
50% {top:197.296875px;left:555.5px;width:200px;height:100px;-moz-transform: rotate(180deg);}
58.33% {top:203.48965454102px;left:551.50958251953px;width:200px;height:100px;-moz-transform: rotate(180deg);}
66.67% {top:197.62403869629px;left:530.58709716797px;width:200px;height:100px;-moz-transform: rotate(180deg);}
75% {top:198.17544555664px;left:504.20013427734px;width:200px;height:100px;-moz-transform: rotate(180deg);}
83.33% {top:198.68653869629px;left:479.36834716797px;width:200px;height:100px;-moz-transform: rotate(180deg);}
91.67% {top:201.34902954102px;left:464.10336303711px;width:200px;height:100px;-moz-transform: rotate(180deg);}
100% {top:197.71875px;left:457.859375px;width:200px;height:100px;-moz-transform: rotate(180deg);}
}
.piece3{-moz-animation-name: piece3; background-color: grey;}
@-moz-keyframes piece3{
0% {top:198px;left:159px;width:400px;height:100px;-moz-transform: rotate(180deg);}
8.33% {top:185.07336425781px;left:164.12794494629px;width:400px;height:100px;-moz-transform: rotate(185deg);}
16.67% {top:177.16390991211px;left:181.15324401855px;width:400px;height:100px;-moz-transform: rotate(189deg);}
25% {top:174.04722595215px;left:206.72116088867px;width:400px;height:100px;-moz-transform: rotate(190deg);}
33.33% {top:177.16390991211px;left:231.15325927734px;width:400px;height:100px;-moz-transform: rotate(189deg);}
41.67% {top:186.07336425781px;left:251.73046875px;width:400px;height:100px;-moz-transform: rotate(185deg);}
50% {top:198px;left:257px;width:400px;height:100px;-moz-transform: rotate(180deg);}
58.33% {top:214.53652954102px;left:250.93588256836px;width:400px;height:100px;-moz-transform: rotate(176deg);}
66.67% {top:219.42529296875px;left:231.54022216797px;width:400px;height:100px;-moz-transform: rotate(172deg);}
75% {top:223.53482055664px;left:206.15324401855px;width:400px;height:100px;-moz-transform: rotate(171deg);}
83.33% {top:219.42529296875px;left:181.54020690918px;width:400px;height:100px;-moz-transform: rotate(172deg);}
91.67% {top:211.53652954102px;left:164.33334350586px;width:400px;height:100px;-moz-transform: rotate(176deg);}
100% {top:198px;left:157px;width:400px;height:100px;-moz-transform: rotate(180deg);}
}
.piece4{-moz-animation-name: piece4; background-color: grey;}
@-moz-keyframes piece4{
0% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(-180deg);}
8.33% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(-150deg);}
16.67% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(-120deg);}
25% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(-90deg);}
33.33% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(-60deg);}
41.67% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(-30deg);}
50% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(0deg);}
58.33% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(30deg);}
66.67% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(60deg);}
75% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(90deg);}
83.33% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(120deg);}
91.67% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(150deg);}
100% {top:198px;left:158px;width:200px;height:100px;-moz-transform: rotate(180deg);}
}
.piece5{-moz-animation-name: piece5; background-color: grey;}
@-moz-keyframes piece5{
0% {top:190px;left:610px;width:200px;height:100px;-moz-transform: rotate(90deg);}
8.33% {top:190px;left:610px;width:200px;height:100px;-moz-transform: rotate(90deg);}
16.67% {top:190px;left:610px;width:200px;height:100px;-moz-transform: rotate(90deg);}
25% {top:190px;left:610px;width:200px;height:100px;-moz-transform: rotate(90deg);}
33.33% {top:191px;left:609px;width:200px;height:100px;-moz-transform: rotate(90deg);}
41.67% {top:191px;left:609px;width:200px;height:100px;-moz-transform: rotate(90deg);}
50% {top:191px;left:609px;width:200px;height:100px;-moz-transform: rotate(90deg);}
58.33% {top:191px;left:609px;width:200px;height:100px;-moz-transform: rotate(90deg);}
66.67% {top:191px;left:609px;width:200px;height:100px;-moz-transform: rotate(90deg);}
75% {top:191px;left:609px;width:200px;height:100px;-moz-transform: rotate(90deg);}
83.33% {top:191px;left:609px;width:200px;height:100px;-moz-transform: rotate(90deg);}
91.67% {top:191px;left:609px;width:200px;height:100px;-moz-transform: rotate(90deg);}
100% {top:191px;left:609px;width:200px;height:100px;-moz-transform: rotate(90deg);}
}
.piece1{-o-animation-name: piece1; background-color: grey;}
@-o-keyframes piece1{
0% {top:199px;left:460px;width:200px;height:100px;-o-transform: rotate(180deg);}
8.33% {top:197.15148925781px;left:463.85107421875px;width:200px;height:100px;-o-transform: rotate(180deg);}
16.67% {top:199.21516418457px;left:478.38763427734px;width:200px;height:100px;-o-transform: rotate(180deg);}
25% {top:199.90660095215px;left:503.29925537109px;width:200px;height:100px;-o-transform: rotate(180deg);}
33.33% {top:200.07453918457px;left:527.66888427734px;width:200px;height:100px;-o-transform: rotate(180deg);}
41.67% {top:199.77648925781px;left:550.39794921875px;width:200px;height:100px;-o-transform: rotate(180deg);}
50% {top:197.296875px;left:555.5px;width:200px;height:100px;-o-transform: rotate(180deg);}
58.33% {top:203.48965454102px;left:551.50958251953px;width:200px;height:100px;-o-transform: rotate(180deg);}
66.67% {top:197.62403869629px;left:530.58709716797px;width:200px;height:100px;-o-transform: rotate(180deg);}
75% {top:198.17544555664px;left:504.20013427734px;width:200px;height:100px;-o-transform: rotate(180deg);}
83.33% {top:198.68653869629px;left:479.36834716797px;width:200px;height:100px;-o-transform: rotate(180deg);}
91.67% {top:201.34902954102px;left:464.10336303711px;width:200px;height:100px;-o-transform: rotate(180deg);}
100% {top:197.71875px;left:457.859375px;width:200px;height:100px;-o-transform: rotate(180deg);}
}
.piece3{-o-animation-name: piece3; background-color: grey;}
@-o-keyframes piece3{
0% {top:198px;left:159px;width:400px;height:100px;-o-transform: rotate(180deg);}
8.33% {top:185.07336425781px;left:164.12794494629px;width:400px;height:100px;-o-transform: rotate(185deg);}
16.67% {top:177.16390991211px;left:181.15324401855px;width:400px;height:100px;-o-transform: rotate(189deg);}
25% {top:174.04722595215px;left:206.72116088867px;width:400px;height:100px;-o-transform: rotate(190deg);}
33.33% {top:177.16390991211px;left:231.15325927734px;width:400px;height:100px;-o-transform: rotate(189deg);}
41.67% {top:186.07336425781px;left:251.73046875px;width:400px;height:100px;-o-transform: rotate(185deg);}
50% {top:198px;left:257px;width:400px;height:100px;-o-transform: rotate(180deg);}
58.33% {top:214.53652954102px;left:250.93588256836px;width:400px;height:100px;-o-transform: rotate(176deg);}
66.67% {top:219.42529296875px;left:231.54022216797px;width:400px;height:100px;-o-transform: rotate(172deg);}
75% {top:223.53482055664px;left:206.15324401855px;width:400px;height:100px;-o-transform: rotate(171deg);}
83.33% {top:219.42529296875px;left:181.54020690918px;width:400px;height:100px;-o-transform: rotate(172deg);}
91.67% {top:211.53652954102px;left:164.33334350586px;width:400px;height:100px;-o-transform: rotate(176deg);}
100% {top:198px;left:157px;width:400px;height:100px;-o-transform: rotate(180deg);}
}
.piece4{-o-animation-name: piece4; background-color: grey;}
@-o-keyframes piece4{
0% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(-180deg);}
8.33% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(-150deg);}
16.67% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(-120deg);}
25% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(-90deg);}
33.33% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(-60deg);}
41.67% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(-30deg);}
50% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(0deg);}
58.33% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(30deg);}
66.67% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(60deg);}
75% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(90deg);}
83.33% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(120deg);}
91.67% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(150deg);}
100% {top:198px;left:158px;width:200px;height:100px;-o-transform: rotate(180deg);}
}
.piece5{-o-animation-name: piece5; background-color: grey;}
@-o-keyframes piece5{
0% {top:190px;left:610px;width:200px;height:100px;-o-transform: rotate(90deg);}
8.33% {top:190px;left:610px;width:200px;height:100px;-o-transform: rotate(90deg);}
16.67% {top:190px;left:610px;width:200px;height:100px;-o-transform: rotate(90deg);}
25% {top:190px;left:610px;width:200px;height:100px;-o-transform: rotate(90deg);}
33.33% {top:191px;left:609px;width:200px;height:100px;-o-transform: rotate(90deg);}
41.67% {top:191px;left:609px;width:200px;height:100px;-o-transform: rotate(90deg);}
50% {top:191px;left:609px;width:200px;height:100px;-o-transform: rotate(90deg);}
58.33% {top:191px;left:609px;width:200px;height:100px;-o-transform: rotate(90deg);}
66.67% {top:191px;left:609px;width:200px;height:100px;-o-transform: rotate(90deg);}
75% {top:191px;left:609px;width:200px;height:100px;-o-transform: rotate(90deg);}
83.33% {top:191px;left:609px;width:200px;height:100px;-o-transform: rotate(90deg);}
91.67% {top:191px;left:609px;width:200px;height:100px;-o-transform: rotate(90deg);}
100% {top:191px;left:609px;width:200px;height:100px;-o-transform: rotate(90deg);}
}
.piece1{animation-name: piece1; background-color: grey;}
@keyframes piece1{
0% {top:199px;left:460px;width:200px;height:100px;transform: rotate(180deg);}
8.33% {top:197.15148925781px;left:463.85107421875px;width:200px;height:100px;transform: rotate(180deg);}
16.67% {top:199.21516418457px;left:478.38763427734px;width:200px;height:100px;transform: rotate(180deg);}
25% {top:199.90660095215px;left:503.29925537109px;width:200px;height:100px;transform: rotate(180deg);}
33.33% {top:200.07453918457px;left:527.66888427734px;width:200px;height:100px;transform: rotate(180deg);}
41.67% {top:199.77648925781px;left:550.39794921875px;width:200px;height:100px;transform: rotate(180deg);}
50% {top:197.296875px;left:555.5px;width:200px;height:100px;transform: rotate(180deg);}
58.33% {top:203.48965454102px;left:551.50958251953px;width:200px;height:100px;transform: rotate(180deg);}
66.67% {top:197.62403869629px;left:530.58709716797px;width:200px;height:100px;transform: rotate(180deg);}
75% {top:198.17544555664px;left:504.20013427734px;width:200px;height:100px;transform: rotate(180deg);}
83.33% {top:198.68653869629px;left:479.36834716797px;width:200px;height:100px;transform: rotate(180deg);}
91.67% {top:201.34902954102px;left:464.10336303711px;width:200px;height:100px;transform: rotate(180deg);}
100% {top:197.71875px;left:457.859375px;width:200px;height:100px;transform: rotate(180deg);}
}
.piece3{animation-name: piece3; background-color: grey;}
@keyframes piece3{
0% {top:198px;left:159px;width:400px;height:100px;transform: rotate(180deg);}
8.33% {top:185.07336425781px;left:164.12794494629px;width:400px;height:100px;transform: rotate(185deg);}
16.67% {top:177.16390991211px;left:181.15324401855px;width:400px;height:100px;transform: rotate(189deg);}
25% {top:174.04722595215px;left:206.72116088867px;width:400px;height:100px;transform: rotate(190deg);}
33.33% {top:177.16390991211px;left:231.15325927734px;width:400px;height:100px;transform: rotate(189deg);}
41.67% {top:186.07336425781px;left:251.73046875px;width:400px;height:100px;transform: rotate(185deg);}
50% {top:198px;left:257px;width:400px;height:100px;transform: rotate(180deg);}
58.33% {top:214.53652954102px;left:250.93588256836px;width:400px;height:100px;transform: rotate(176deg);}
66.67% {top:219.42529296875px;left:231.54022216797px;width:400px;height:100px;transform: rotate(172deg);}
75% {top:223.53482055664px;left:206.15324401855px;width:400px;height:100px;transform: rotate(171deg);}
83.33% {top:219.42529296875px;left:181.54020690918px;width:400px;height:100px;transform: rotate(172deg);}
91.67% {top:211.53652954102px;left:164.33334350586px;width:400px;height:100px;transform: rotate(176deg);}
100% {top:198px;left:157px;width:400px;height:100px;transform: rotate(180deg);}
}
.piece4{animation-name: piece4; background-color: grey;}
@keyframes piece4{
0% {top:198px;left:158px;width:200px;height:100px;transform: rotate(-180deg);}
8.33% {top:198px;left:158px;width:200px;height:100px;transform: rotate(-150deg);}
16.67% {top:198px;left:158px;width:200px;height:100px;transform: rotate(-120deg);}
25% {top:198px;left:158px;width:200px;height:100px;transform: rotate(-90deg);}
33.33% {top:198px;left:158px;width:200px;height:100px;transform: rotate(-60deg);}
41.67% {top:198px;left:158px;width:200px;height:100px;transform: rotate(-30deg);}
50% {top:198px;left:158px;width:200px;height:100px;transform: rotate(0deg);}
58.33% {top:198px;left:158px;width:200px;height:100px;transform: rotate(30deg);}
66.67% {top:198px;left:158px;width:200px;height:100px;transform: rotate(60deg);}
75% {top:198px;left:158px;width:200px;height:100px;transform: rotate(90deg);}
83.33% {top:198px;left:158px;width:200px;height:100px;transform: rotate(120deg);}
91.67% {top:198px;left:158px;width:200px;height:100px;transform: rotate(150deg);}
100% {top:198px;left:158px;width:200px;height:100px;transform: rotate(180deg);}
}
.piece5{animation-name: piece5; background-color: grey;}
@keyframes piece5{
0% {top:190px;left:610px;width:200px;height:100px;transform: rotate(90deg);}
8.33% {top:190px;left:610px;width:200px;height:100px;transform: rotate(90deg);}
16.67% {top:190px;left:610px;width:200px;height:100px;transform: rotate(90deg);}
25% {top:190px;left:610px;width:200px;height:100px;transform: rotate(90deg);}
33.33% {top:191px;left:609px;width:200px;height:100px;transform: rotate(90deg);}
41.67% {top:191px;left:609px;width:200px;height:100px;transform: rotate(90deg);}
50% {top:191px;left:609px;width:200px;height:100px;transform: rotate(90deg);}
58.33% {top:191px;left:609px;width:200px;height:100px;transform: rotate(90deg);}
66.67% {top:191px;left:609px;width:200px;height:100px;transform: rotate(90deg);}
75% {top:191px;left:609px;width:200px;height:100px;transform: rotate(90deg);}
83.33% {top:191px;left:609px;width:200px;height:100px;transform: rotate(90deg);}
91.67% {top:191px;left:609px;width:200px;height:100px;transform: rotate(90deg);}
100% {top:191px;left:609px;width:200px;height:100px;transform: rotate(90deg);}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment