CSS Transforms and Animations

Change & Motion

Web Typography Workshop @ Letterform Archive
Week 3

CSS Transforms

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

The general syntax is as follows: transform: { transform-type(units) } Note: regardless of the type of transform you apply, we use the transform property. The property has the following parameters.

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;
}
a
a

Rotate

rotate() Rotates the element clockwise or counter-clockwise(-). This must be specified in degrees (deg). 


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

2D Translate

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


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

Scale

scale() stretches an element horizontally and/or vertically. Scale values are declared unitless, as a ratio. The scaling applies to everything within the element. When specifying one value, it will scale it by that number proportionally. When specifying two (comma-separated) values, it will scale the element along the X and Y axis accordingly. 


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

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

Skew

skew() stretches an element horizontally and/or vertically. Skews are defined in degrees (deg). Contained elements, such as text, will also be skewed. Similar to scale, it can apply along X and/or Y axes. 


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

Combining transforms

Multiple transforms can be applied to the same element with a space in between. Note: you cannot declare multiple transforms with separate transform property rules; 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%);

	// this won’t combine
	// transform: scale(.3, 1.2);
	// transform: rotate(30deg);
}
a
a

See also: filters & blend modes

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 more about filters, background blend modes and mix blend modes. Note: background-blend-mode is for a background image of an element, and mix-blend-mode is for an html element itself.

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: By specifying the transition on the element itself, you define the transition to occur in both directions, both on/off hover.)

The general syntax looks like transition: background-color 1s ease-in 2s; (This is theshorthand notation that combines the following properties. The first unit of time is always the duration; the second the delay.)

Transition Demo


.normal:hover{
	transform: rotate(45deg);
}
.transition{
	transition: transform 400ms ease-in-out;

	//note that transition property is applied
	//to the selector without the :hover
}
.transition:hover{
	transform: rotate(45deg);
}
a
a

Transition Properties

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. Unlike CSS transitions, animations allow motion without triggers. Animations consist of two separate sets of CSS declarations:

  1. @keyframes specifies the state of the element at a certain time point (relative to defined timing of animation.) These can be declared with keywords from and to or % units of the animation duration.
  2. animation properties apply the keyframe animation to one or many elements (depending on the CSS selector)

Animation Demo


@keyframes changecolor {
  0% {
    background-color: blue;
    border-radius: 0;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: green;
    border-radius: 50px;
  }
}

#animated-div{
	color: white;
	background: grey;
  animation: changecolor 10s linear 3s infinite alternate;
}
Animation Demo

Animation Properties

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: 10s;
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: 3s;
animation-iteration-count number of times the animation runs, infinite or numbers animation-iteration-count: infinite;
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 be applied to any “animatable” CSS property, but we should be careful as some properties may eat up some of your website 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.

Variable Font Animation Demo


.magmatic-animate{
  animation: magmatic-axis
  	6s linear alternate infinite;
}

@keyframes magmatic-axis{
0% {
  font-variation-settings: 'wght' 100, 'wdth' 150,
  'XHGT' 0;
}
25% {
  font-variation-settings: 'wght' 900, 'wdth' 150,
  'XHGT' 0;
}
50% {
  font-variation-settings: 'wght' 900, 'wdth' 50,
  'XHGT' 0;
}
75% {
  font-variation-settings: 'wght' 100, 'wdth' 50,
  'XHGT' 0;
}
100% {
  font-variation-settings: 'wght' 100, 'wdth' 150,
  'XHGT' 0;
}
}
Abc