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

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

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

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

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.

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

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.