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
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
126-CSS3: Transitions, Transforms, Animations
By tkjn
126-CSS3: Transitions, Transforms, Animations
- 5,219
