CSS Transitions

transition

Responds to state changes:

• :hover, :focus, :checked, :invalid
• Selector change (class, attribute, etc)

transition

transition: opacity .2s .3s ease-out;

• transition-property
• transition-duration
• transition-delay
• transition-timing-function

transition-property

A valid CSS property name

transition-duration

Total time it takes the transition to run

default: 0s

transition-delay

Time before the transition begins

Can be negative: starts transition partway through

default: 0s

transition-timing-function

Keyword or cubic-bezier function

default: ease

transition

.box {
  opacity: 1;
  transition: opacity .25s ease-in-out;
}
.box[aria-hidden="true"] {
  opacity: 0;
}

transition

.field {
  border-bottom: 2px solid #eee;
  transition: border-color .1s linear;
}
.field:invalid {
  border-bottom-color: #B71C1C;
}

transition

.link {
  transition: transform .15s
    cubic-bezier(.75,.25,.75,1.5);
}
.link:hover {
  transform: scale(1.15);
}

CSS Animations

animation

animation: spinner .2s .3s ease-out infinite altenate paused;

animation

• animation-name
• animation-duration
• animation-delay
• animation-timing-function
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• animation-timing-function

animation-name

Corresponds to a keyframes animation in the stylesheet

animation-duration

Total time it takes the animation for one complete cycle

default: 0s

animation-delay

Time before the animation begins

Can be negative: starts animation partway through

default: 0s

animation-timing-function

Keyword or cubic-bezier function

default: ease

animation-iteration-count

How many times the animation should run before stopping

default: 1

animation-direction

Should an animation play forwards, backwards, or alternating

normal, reverse, alternate, alternate-reverse

default: normal

animation-fill-mode

How an animation should apply styles to its target before and after running

none, forwards, backwards, both

default: none

animation-play-state

Specifies if an animation is running or paused

running, paused

default: running

keyframes

A CSS at-rule block, containing styles corresponding to frames in an animation sequence

keyframes

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

keyframes

@keyframes wiggle {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: rotate(0deg);
  }
  30%, 70% {
    transform: rotate(-5deg);
  }
  50%, 90% {
    transform: rotate(5deg);
  }
}

keyframes

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: translate(-50vw, 200%) scale(0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}