Advanced CSS

What we'll cover

  • Transforms
  • Animations
  • Transitions
  • Media Queries
  • Screen/Print styles

Graphics Processing Unit (GPU)

The CPU is located on the computer’s motherboard; it processes almost everything and is known as the brain of the computer.  

Central Processing Unit (CPU)

The GPU is located on the graphics card of the computer, and is responsible for processing and rendering graphics.

Graphics Processing Unit (GPU)

CPU draws the layers 


Central Processing Unit (CPU)

  • GPU composites the layers
  • GPU is efficient at basic drawing operations
  • Changes on GPU-composited layers are the least expensive
  • GPU is designed specifically for performing the complex mathematical and geometric calculations that are necessary for graphics rendering.


  • Offloading operations onto the GPU can yield massive performance gains and can also reduce CPU contention on mobile devices.

The best-performing version of the pixel pipeline avoids both layout and paint, and only requires compositing changes.


In order to achieve this you will need to stick to changing properties that can be handled by the compositor alone. Today there are only two properties for which that is true:


transforms and opacity

Seriously, that's it.


CSS transforms are implemented using a set of CSS properties that let you apply affine linear transformations to HTML elements.  These transformations include rotation, skewing, scaling, and translation both in the plane and in the 3D space.



Tilt Demo


CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components:


  • a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style
  • Possible intermediate waypoints.

Initial Values of

Animation Properties:


Horizontal Scrolling Demo


  • Read Beginner's Guide to CSS Animations
  • Create a Codepen account
  • Either fork and edit or create an animation from scratch


The transition CSS property is a shorthand property for transition-propertytransition-durationtransition-timing-function, and transition-delay. It enables you to define the transition between two states of an element. 


Hover Demo

Media Queries

@media screen and (min-width: 700px) and (orientation: landscape) { ...  }

Logical Operators

and, not, or

Media Features

Media Query


Responsive Screen

.square {
  background: red;

@media screen and (max-height: 720px) {
  .square {
    height: 100px;
    width: 100px;

@media screen and (min-height: 720px) and (max-height: 760px) {
  .square {
    height: 200px;
    width: 200px;
<div class="square"></div>


@media print {

  // Set default to black and white
  body {
    color: black;
    background: $white;

  .home-button {
    i {
      background: url("images/logo/allovue_logo_bw.svg");
    h1, h2 {
      color: black;

   // Don't display these when printing
  .not-for-print {
    visibility: hidden;

  .only-for-screen {
    display: none;


(due Thursday, Nov 17)

  • Completed HTML/CSS
  • Refer to the rubric!

$300 million button

Advanced CSS

By brigittewarner

Advanced CSS

  • 570
Loading comments...

More from brigittewarner