Unit 4: Styling your website

4.3 Styling text transitions

Styling text transitions

In some modules, it's possible to define different text transitions; these types of transitions/animations can be seen on the page when hovering over the relevant elements, being the transition between the normal and hover state.

Where can text transitions be applied?

  • Navigation module
  • Language selector module
  • Breadcrumb module

Visualizing the transition effects

1. No transition

No transition

2. Ease in

A text with an ease-in transition will have the animation starting slowly and ending fast.

Ese in

3. Ease in out

A text with an ease-in-out transition will have an accelerated animated beginning and ending.

Ease in out

4. Linear

A text with a linear transition will be gradually and equally animated as time passes.


Transition types graphed

Graphed transition types