CSS TRANSITIONS, TRANSFORMS, & ANIMATIONS

COMP 126: Practical Web Design & Development for Everyone

transitions

allow property changes in CSS values to occur smoothly over a specified duration

transforms

you can combine transitions and transforms to animate elements

animations

allow elements styled with CSS to be moved or changed in two- or three-dimensional space

transitions

anatomy of a transition

  • transition-property: the property you want to transition. Note: not every property can be transitioned!

  • transition-duration: in seconds or milliseconds: 4s or 4000ms (250-300ms is considered the "sweet spot").

  • transition-timing-function: “cushioning" for the transition, defaults to ease; optional.

  • transition-delay: the number of milli/seconds to delay the transition before firing it; optional.

Shorthand syntax:

transition: [property] [duration] [timing-function][delay];

 

 

timing functions

  • linear: The animation has the same speed from start to end.

  • ease: Default value. Starts slow, then speeds up, then ends slow.

  • ease-in: Starts slowly, speeds up to end.

  • ease-out: Starts fast, slows down to end.

  • ease-in-out: Starts slow, ends slow.

  • cubic-bezier: You define the curve: https://cubic-bezier.com/

 

There are more: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

simple hover transition 

transitioning multiple properties

or, in shorthand:

 

transition: 
    color 2s, 
    transform 300ms 1s;

transition-duration

transition-delay

transition-property

transition-property: color, transform;
transition-duration: 2s, 300ms;
transition-delay: 0, 1s;

CODEHS: exercise 2.1.1

https://codehs.com/lms/assignments/592950

transforms

transforms

transform values:

translate (move)

rotate (turn)

scale (size)

skew (distort/squish)

...allow you to change the shape and/or positioning of an element without interfering with the document flow (the other elements on the page)

transform syntax: classic vs modern

transform functions (classic)Equivalent individual transform properties (modern)
transform: translateX(30px);translate: 30px 0;
transform: translateY(30px);translate: 0 30px;
transform: scaleX(2);scale: 2 1;
transform: scaleY(2);scale: 1 2;
transform: rotate(30deg);rotate: 30deg;
transform: skew(20deg, 30deg);transform: skew(20deg, 30deg);

BASIC transforms, CLASSIC syntax

BASIC transforms, modern syntax

EXercise 2.1.2: Transform the button

EXercise 2.1.3: AN INTERACTIVE CARD

TAKEAWAYs:

 

transform describes what an element looks like in a particular state.

 

transition describes how the browser gets the element from one state to another.

 

animations

CSS transitions smooth the change between two states. CSS animations define their own sequences of changes.

TRANSITIONS VS ANIMATIONS

animation property + @keyframes block

.animated-div {
    animation: black-to-white 1s linear 1;
}

@keyframes black-to-white {
    0% { background: black; }
    100% { background: white; }
}

the animation property binds a named animation to an element and specifies its duration

the @keyframes block names the animation and specifies what its properties are animating "from" (at 0%) and "to" (at 100%)

animation sYNTAX

  • animation-name: The name of the keyframe block you want to use. Can be anything.

  • animation-duration: How long the animation takes to proceed from 0% complete to 100% complete.

  • animation-timing-function: Just like transition-timing-function; defaults to ease.

  • animation-delay: The number of seconds to delay the start of the animation from its trigger; optional.

  • animation-iteration-count: The number of times you want the animation to proceed from 0% to 100%; "infinite" if you don't want to it stop. Defaults to 1; optional. 

.animated-div {
    animation: black-to-white 1s linear 2s 2;
}

 the @keyframes block

...allows you to define a group of properties and values to animate, rather than simply changing one or two values (as in transitions)

@keyframes black-to-white {
  from {
    background: black;
    color: white;
  }
  to {
    background: white;
    color: black;
  }
}
@keyframes black-to-white {
  0% { color: black; }
  50% { color: grey; }
  100% { color: white; }
}

the name I chose for this animation (black-to-white)

start (0%): white text on black

end (100%):

black text on white

you can control the animation in more than two stages with multiple percentages

Two-state animation

multi-step animation

EXErcise 2.1.4: @keyframes animation: pop

EXErcise 2.1.5: multiple keyframes for pop

EXErcise 2.1.6: loading indicator/timer

Accessibility note: don't make people sick!

you can add prefers-reduced-motion so your animations don't run/trigger symptoms for those with visual sensitivities or neurological conditions (epilepsy, migraines, ADHD, etc.) who have turned animations off in their OSs/browsers

example buttons with transition, transform, animation