CSS Transitions

CSS transitions provide a way to control animation speed when changing CSS properties

When do CSS properties change?

• Adding or Removing classes
• Parent class changes
• hover, active

When do CSS properties change?

• Adding or Removing classes
• Parent class changes
• hover, active

div {
    transition: <property> <duration> <timing-function> <delay>;
}

CSS Transition Syntax

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Property

Any CSS property that can be interpolated

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Duration

Specifies the duration over which transitions should occur

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Timing Function

Timing functions determine how intermediate values of the transition are calculated

http://easings.net/

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Delay

Defines how long to wait between the time a property is changed and the transition actually begins.

300ms


2s

Lets build some

1. links that change color on hover

2. Icon that rotates when clicked

3. Input borders change when focused

4. progress bar

5. Element that follows the mouse

CSS Animations

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, as well as possible intermediate waypoints.

Properties

• Delay
• Direction
• Duration
• Iteration-count
• Animation-name
• play-state
• timing-function

Keyframes

@keyframe rules define the state of the animation as it happens through time.

keyframes use percentages or "to" and "from" to show the state at a given "key" moments -- and the other values are interpolated.

Keyframes

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Lets build some

• A square which pulses a color
• A notification icon that shakes
• A bouncing ball

Animation in React

Base changes on "state"

(animating between states)