CSS Utilities

Media Queries min-width and max-width

@media only screen and (min-width: 330px) {...}:

  • If [device width] is greater than or equal to 330px, then do {...}

@media only screen and (max-width: 330px) {...}:

  • If [device width] is less than or equal to 330px, then do {...}

Infinite rotate animation CSS3

/* Chrome, Safari, Opera */ 
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

/* Mozilla */
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}

/* Elements to rotate */
.rotate {
-webkit-animation: rotate 1s ease-in-out infinite;
-moz-animation: rotate 1s ease-in-out infinite;
animation: rotate 1s ease-in-out infinite;
}