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];

simple hover transition

transitioning multiple properties

or, in shorthand:

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

transition-durations

transition-delay

transition-properties

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

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

timing functions

linear: The animation has the same speed from start to end.
ease: Default value. The animation has a slow start, then fast, before it ends slowly.
ease-in: The animation has a slow start.
ease-out: The animation has a slow end.
ease-in-out: The animation has both a slow start and a slow end.

multi-step animation

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;

buttons: transition, transform, animation

SVGs

https://icons8.com/