Skip to content

Instantly share code, notes, and snippets.

@marcusig
Created October 5, 2020 09:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marcusig/d1574d52e26c14137cadd905beb06933 to your computer and use it in GitHub Desktop.
Save marcusig/d1574d52e26c14137cadd905beb06933 to your computer and use it in GitHub Desktop.
Make a layer spin - e.g. a watch second hand
@keyframes rotate360 {
from {transform: translate(-50%, -50%) rotate(0deg);}
to {transform: translate(-50%, -50%) rotate(360deg);}
}
/*
"Evolvens_mp_mutato_" is the prefix of the file for the second hand
it is expected that all the choices requiring the animation have the same prefix.
*/
.mkl_pc .mkl_pc_container .mkl_pc_viewer .mkl_pc_layers img[src*="Evolvens_mp_mutato_"] {
transform-origin: 50% 50%;
animation-name: rotate360;
animation-duration: 60s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment