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

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

you can combine transitions and transforms to animate elements

animations

transitions

simple nav transition

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;

transforms

transforms

translate (move)

rotate/scale (size)

skew (distort/squish)

2D transforms

  • horizontal (x-axis)

  • vertical (y-axis)

 

3D transforms

  • horizontal (x-axis)

  • vertical (y-axis)

  • depth (z-axis) 

 

...allow you to change the shape and positioning of an element without interfering with the document flow (the other elements on the page); can be coupled with transitions for an animation-style effect

simple transform 

more transitions & transforms

changes the position of the origin of transformation from its default origin (i.e., its own center and/or the boundaries of the parent element); values, examples, and more demos here

 transform-origin

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 {
  0% /* or from */ {
    background: black;
    color: white;
  }
  100% /* or 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 stages with multiple percentages

multi-step animation

buttons: transition, transform, animation

SVGs

https://icons8.com/

background-position

one value: keyword, length, or percentage on X axis
two values: keyword, length, or percentage on X and Y axes
three values: X, Y, and an offset for Y
four values: X, offset for X, Y, offset for Y

/* keyword */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center; 


/* <percentage> */
background-position: 25% 75%;

/* <length> */
background-position: 1cm 2cm;

/* offsets */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;