Tweening

CSS Transitions

Transitions allow (animatable) property changes in CSS values to occur smoothly over a specified duration. Transitions requires a trigger (such as :hover) to take effect. They are declared to the element targeted for the change. (Note that by specifying the transition on the element itself, you define the transition to occur in both directions. )

transition: background-color 1s ease-in 2s;

* This is shorthand notation that combines the following properties. The first unit of time is always the duration; the second the delay.

property description example
transition-property property being transitioned (or use transition-property: all) — see list of properties transition-property: background-color
transition-duration duration of effect, in seconds (s) or milliseconds (ms) transition-duration: 1s;
transition-timing-function transition style — see common easing effects transition-timing-function: ease-in;
transition-delay delay until starting effect, in seconds (s) or milliseconds (ms) transition-delay: 2s;

CSS Animations

Using just CSS, you can create animation sequences for any element. (Animations allow motion without triggers.)
Animations consist of two separate sets of CSS declarations:

  • @keyframes: specifies the state of the element at a certain time point (relative to defined timing of animation.)
  • animation properties apply the keyframe animation to one or many elements
@keyframes changecolor {
  0% {
    background-color: blue;
  }
  50% {
    background-color: yellow;
    color: rgba(200,155,20,0.8);
  }
  100% {
    background-color: green;
  }
}

#animated-div{
  animation: changecolor 3.5s linear 0.2s infinite alternate;
}
Animation Demo
  • changecolor is the identifier — your name for the animation. This must match the name used to declare animation properties
  • The nested brackets, or keyframes are the timestamps / waypoints in the animation. You can use from,to, % to specify these points.

*This animation shorthand notation that combines the following properties. The first unit of time is always the duration; the second the delay.

property description example
animation-name identifier given to animation in @keyframes declarations, any name without spaces animation-name: changecolor;
animation-duration duration of animation, which is broken up into the waypoints defined in keyframes, in seconds (s) or milliseconds (ms) animation-duration: 3.5s;
animation-timing-function animation style, same as transitions animation-timing-function: linear;
animation-delay delay until starting animation, in seconds (s) or milliseconds (ms) animation-delay: 0.2s;
animation-iteration-count number of times the animation runs, infinite or numbers animation-iteration-count: 3;
animation-direction from what direction the animation begins, normal, reverse, alternate, alternate-reverse animation-direction: alternate;
animation-play-state whether to play or pause, running (default), paused animation-play-state: running;
animation-fill-mode whether to apply styles before and after the animation executes, none (default), forwards, backwards, both animation-fill-mode: none;

Animations and transforms

Transitions and animations can also be combined with any “animatable” CSS property, but we should be careful as some properties may eat up some of your performance (and your animation may appear choppy.) Not all properties are “animatable.” Transform properties lend well to transitions and animations. Variable font properties can also be animated.

CSS Transforms

CSS transform allows you to change the shape and position of HTML elements without disrupting the normal flow. For 2dimensional transforms, the x-value is declared first, then the y-value.

Syntax: transform: { transform-type(units) }

Transform Origin

transform-origin specifies the origin point of the transformation performed. This can be specified in multiple forms, including keywords, % values, and px. It is at the center of the element by default.

.example {
  transform: rotate(-10deg);
  transform-origin: bottom left;
}

Rotate

rotate() Rotates the div clockwise or counter-clockwise(-), specified in degrees (deg).

.rotate {
  transform: rotate(30deg);
}

2D Translate

translate() moves an element sideways, up, or down. This can be specified in any length unit.

.translate{
  transform: translate(40px, 20px);
}

Scale

scale() stretches an element horizontally and/or vertically. Scale values are unitless. This also applies to the font-size, padding, height, and width of an element.

.scale-preserve-ratio {
  transform: scale(.7);
}

.scale-xy {
  transform: scale(.5, 1.5);
}

Skew

skew() stretches an element horizontally and/or vertically. Skews are defined in degrees. Contained elements, such as text, will also be skewed.

.skew {
  transform: skew(10deg,30deg);
}

Combining transforms

Multiple transforms can be applied to the same element with a space in between. (Note: you cannot declare transforms separately; the latter will override the former.) Transforms are applied in the order they are declared.
More on transforms including perspectival / 3D effects.

.combined-example {
  transform: scale(.3, 1.2) rotate(30deg) skewY(-15deg) translate(50px, 20%);
}

CSS Filters

While transforms are one way of modifying the shapes on the page, filters and blend-modes provide similar functions to Photoshop effects and layers.

See Filter Effects

CSS Blend Modes

Like Layer Styles in Photoshop, you can also use blend-modes to achieve desired overlapping effects.
There are two kinds of blend modes:

  • background-blend-mode for background images
  • mix-blend-mode for html elements

See more about background blend modes and mix blend modes.