Using CSS Animations on Media Queries

When Coding you Website or Degsign your blog,you should conside following stages:
1.Desktop --all general styles, none wrapped in a media query.
2.Tablet: media query, roughly popular tablet widths.
3.Phone: media query, any width below tablet width.
4.Print: media query, mostly a bunch display: none

Scoping your CSS animations and transitions to desktop, instead of removing those properties at smaller widths, is more maintainable and has to be more performant, here's how to do it:

.container { width: 200px; height: 100px; display: block; }

@media (min-width: 1024px) { /* Only do container animation on desktop, otherwise don't bother */ .container { opacity: 0; transition: opacity 1s; } .container.loaded { opacity: 1; } }