# CSS

Everything about CSS

# 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 */ <br></br>@-webkit-keyframes rotate { <br></br>  from {-webkit-transform: rotate(0deg);} <br></br>  to {-webkit-transform: rotate(360deg);} <br></br>} <br></br><br></br>/* Standard syntax */ <br></br>@keyframes rotate { <br></br>  from {transform: rotate(0deg);} <br></br>  to {transform: rotate(360deg);} <br></br>} <br></br><br></br>/* Mozilla */ <br></br>@-moz-keyframes rotate { <br></br>  from {-moz-transform: rotate(0deg);} <br></br>  to {-moz-transform: rotate(360deg);} <br></br>} <br></br><br></br>/* Elements to rotate */<br></br>.rotate {<br></br>  -webkit-animation: rotate 1s ease-in-out infinite;<br></br>  -moz-animation: rotate 1s ease-in-out infinite;<br></br>  animation: rotate 1s ease-in-out infinite;<br></br>}
```