csfieldguide/static/interactives/fsa-washing-machine/css/fsa-washing-machine.scss
#interactive-fsa-washing-machine-images {
position: relative;
pointer-events: none !important;
}
#interactive-fsa-washing-machine-images img {
width: 20em;
vertical-align: top;
}
#interactive-fsa-washing-machine-images .image-overlay {
position: absolute;
top: 15px;
left: 0;
right: 0;
margin: 0 auto;
width: 20em;
/* Removes jagged edges during animation in Chrome */
outline: 1px solid transparent;
transition: none !important;
}
/*#interactive-fsa-washing-machine button {
text-transform: none;
margin: 0.5em;
}
#interactive-fsa-washing-machine-buttons {
font-size: 1.5em;
}*/
#interactive-fsa-washing-machine-state-text {
font-size: 2em;
}
#interactive-fsa-washing-machine-current-state-text {
font-weight: bold;
}
@keyframes rotate_clockwise {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#interactive-fsa-washing-machine-fast {
-webkit-animation: rotate_clockwise 0.4s linear infinite paused;
-moz-animation: rotate_clockwise 0.4s linear infinite paused;
-ms-animation: rotate_clockwise 0.4s linear infinite paused;
-o-animation: rotate_clockwise 0.4s linear infinite paused;
animation: rotate_clockwise 0.4s linear infinite paused;
}
#interactive-fsa-washing-machine-medium {
-webkit-animation: rotate_clockwise 0.7s linear infinite paused;
-moz-animation: rotate_clockwise 0.7s linear infinite paused;
-ms-animation: rotate_clockwise 0.7s linear infinite paused;
-o-animation: rotate_clockwise 0.7s linear infinite paused;
animation: rotate_clockwise 0.7s linear infinite paused;
}
#interactive-fsa-washing-machine-slow {
-webkit-animation: rotate_clockwise 1.1s linear infinite paused;
-moz-animation: rotate_clockwise 1.1s linear infinite paused;
-ms-animation: rotate_clockwise 1.1s linear infinite paused;
-o-animation: rotate_clockwise 1.1s linear infinite paused;
animation: rotate_clockwise 1.1s linear infinite paused;
}
.animation-running {
animation-play-state: running !important;
}