Web Type

Change over time

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.

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() 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.

  transform: translate(40px, 20px);


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() 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 Transitions

Transform functions combine well with CSS animations and transitions. Transitions allow 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 changecolor {
  0% {
    background-color: blue;
  50% {
    background-color: yellow;
    color: rgba(200,155,20,0.8);
  100% {
    background-color: green;

  animation: changecolor 3.5s linear 0.2s 3 alternate;
Animation Demo

*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.