Skip to content

Instantly share code, notes, and snippets.

@pimatco
Created March 8, 2018 22:48
Show Gist options
  • Save pimatco/ae4651e6c4158208c7ee65579a74ca0b to your computer and use it in GitHub Desktop.
Save pimatco/ae4651e6c4158208c7ee65579a74ca0b to your computer and use it in GitHub Desktop.
Animation CSS Rotating Irregular
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {
top:0px;
left: 0px;
opacity: 100;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
10% {
top:25px;
left:25px;
opacity: 90;
-webkit-transform: rotate(36deg);
-ms-transform: rotate(36deg);
transform: rotate(36deg);
}
20% {
top:45px;
left: 45px;
opacity: 80;
-webkit-transform: rotate(64deg);
-ms-transform: rotate(64deg);
transform: rotate(64deg);
}
30% {
top:65px;
left: 65px;
opacity: 70;
-webkit-transform: rotate(108deg);
-ms-transform: rotate(108deg);
transform: rotate(108deg);
}
40% {
top:85px;
left: 85px;
opacity: 60;
-webkit-transform: rotate(144deg);
-ms-transform: rotate(144deg);
transform: rotate(144deg);
}
50% {
top:105px;
left: 105px;
opacity: 50;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
60% {
top:125px;
left: 125px;
opacity: 40;
-webkit-transform: rotate(216deg);
-ms-transform: rotate(216deg);
transform: rotate(216deg);
}
70% {
top:145px;
left: 145px;
opacity: 30;
-webkit-transform: rotate(252deg);
-ms-transform: rotate(252deg);
transform: rotate(252deg);
}
80% {
top:165px;
left: 165px;
opacity: 20;
-webkit-transform: rotate(288deg);
-ms-transform: rotate(288deg);
transform: rotate(288deg);
}
90% {
top:185px;
left: 185px;
opacity: 10;
-webkit-transform: rotate(324deg);
-ms-transform: rotate(324deg);
transform: rotate(324deg);
}
100% {
top:205px;
left: 205px;
opacity: 0;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* Standard syntax */
@keyframes example {
0% {
top:0px;
left: 0px;
opacity: 100;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
10% {
top:25px;
left:25px;
opacity: 90;
-webkit-transform: rotate(36deg);
-ms-transform: rotate(36deg);
transform: rotate(36deg);
}
20% {
top:45px;
left: 45px;
opacity: 80;
-webkit-transform: rotate(64deg);
-ms-transform: rotate(64deg);
transform: rotate(64deg);
}
30% {
top:65px;
left: 65px;
opacity: 70;
-webkit-transform: rotate(108deg);
-ms-transform: rotate(108deg);
transform: rotate(108deg);
}
40% {
top:85px;
left: 85px;
opacity: 60;
-webkit-transform: rotate(144deg);
-ms-transform: rotate(144deg);
transform: rotate(144deg);
}
50% {
top:105px;
left: 105px;
opacity: 50;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
60% {
top:125px;
left: 125px;
opacity: 40;
-webkit-transform: rotate(216deg);
-ms-transform: rotate(216deg);
transform: rotate(216deg);
}
70% {
top:145px;
left: 145px;
opacity: 30;
-webkit-transform: rotate(252deg);
-ms-transform: rotate(252deg);
transform: rotate(252deg);
}
80% {
top:165px;
left: 165px;
opacity: 20;
-webkit-transform: rotate(288deg);
-ms-transform: rotate(288deg);
transform: rotate(288deg);
}
90% {
top:185px;
left: 185px;
opacity: 10;
-webkit-transform: rotate(324deg);
-ms-transform: rotate(324deg);
transform: rotate(324deg);
}
100% {
top:205px;
left: 205px;
opacity: 0;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment