@-webkit-keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
85%, 100% {
-webkit-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}
@-moz-keyframes rotate {
0% {
-moz-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
85%, 100% {
-moz-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}
@-ms-keyframes rotate {
0% {
-ms-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
85%, 100% {
-ms-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}
@keyframes rotate {
0% {
transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
85%, 100% {
transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}
@-webkit-keyframes ring {
0% {
-webkit-transform: scaleX(0.1) scaleY(0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
75%, 100% {
-webkit-transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}
@-moz-keyframes ring {
0% {
-moz-transform: scaleX(0.1) scaleY(0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
75%, 100% {
-moz-transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}
@-ms-keyframes ring {
0% {
-ms-transform: scaleX(0.1) scaleY(0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
75%, 100% {
-ms-transform: scalex(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}
@keyframes ring {
0% {
transform: scaleX(0.1) scaleY(0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
75%, 100% {
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}
@-webkit-keyframes ring2 {
0% {
-webkit-transform: scaleX(0.5) scaleY(0.1);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
65%, 100% {
-webkit-transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}
@-moz-keyframes ring2 {
0% {
-moz-transform: scaleX(0.5) scaleY(0.1);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
65%, 100% {
-moz-transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}
@-ms-keyframes ring2 {
0% {
-ms-transform: scaleX(0.5) scaleY(0.1);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
65%, 100% {
-ms-transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}
@keyframes ring2 {
0% {
transform: scaleX(0.5) scaleY(0.1);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);}
65%, 100% {
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);}}Sumber Artikel - Mengenal Bentuk Elemen CSS Pseudo Animasi Dan Transisi