Transforms & transitions · Web Dev 3

Transforms & transitions

CSS effects

CSS has a bunch off different effect properties built-in, with slightly different features.

We’ll look at the two easier ones this week: transform & transition

`transform`

Visual effects that can be applied to any HTML element; but, by themselves, they are not interactive.

Rotations
Skewing
Scaling up or down
etc.

HTML

<div class="violet"></div>
<div class="purple"></div>
<div class="green"></div>

CSS

.violet {
  transform: rotate(33deg);
}
.purple {
  transform: skew(24deg);
}
.green {
  transform: scale(1.5) rotate(-6deg);
}

Use the transform property to affect an element—there are whole bunch of built-in transformations but there are really only a few commonly used ones.

CSS: Line B

The rotate() transformation simply rotates an element and all its contents. You can use negative numbers, like rotate(-33deg) to go backwards.

CSS: Line H

If you want to have more than one transform you can’t use the transform property multiple times; the way CSS works, only the last transform will be applied.

So we must put each different transform function on the same line, separated by a space.

This will both scale and rotate the element.

`transition`

Transitions are user initiated easing effects. When a user interacts with an element we can apply some kind of easing-like animation.

Triggered when a property changes on an element
Must always be written on the default state
Can animate any element that’s a number: padding, color, transform, etc.

HTML

<a class="btn" href="#">T-Rex!</a>

CSS

.btn {
  background-color: #5e54af;
  transition: all 200ms linear;
}
.btn:hover {
  background-color: #3c3670;
}

Transitions require a user to interact with an element for the easing to occur, like a hover or a click.

CSS: Line C

The transition will slowly animate between the two colours: the original colour and the hover colour.

There are three pieces of information that should be supplied for transitions:

all — what property to transition, all means every numerical property that changes; but you could write color or border-width or something specific instead.
200ms — the length of time the transition should take, can be written in milliseconds (ms) or in seconds (s): 200ms = .2s
linear — the type of easing: ease-in, ease-out, etc. (Same as AfterEffects.) linear means “no easing”.

CSS: Line E

Do not put transition in :hover—it won’t do what you expect.

They should always go in the original state. Transitions need to be “set-up” so that when a user does hover the transition is ready to go.

Videos & tutorials

CSS animations & effects ➔ CSS animations & effects cheat sheet ➔