Transitions

Transition = Transformation = Transmogrifiction

CSS Transition is basically code that adds changes or effects on a simple element.

From adding colours to making animations.

Exhibit B - 3D Transformation

This container will pop up by rotating in 360 degree.

Exhibit C - Colour Transition

This container will change colour from Coral to Aqua when you hover the mouse over it.

Exhibit D - Call-to-Action Transition

Call-to-action is simply an effect that appears when you hover over the button. In this example, it lits up and send you to the home page when you click on it.

Home
Exhibit E - Image Overlay Transition

In this case, I have two different images, one on top of the other, the hover function makes the overlay top one to fade and reveal the one underneath.

Exhibit F - Section Transition

Clickling the tab Question A or B will make the section below to display the question.

Question A

What is the origin of card game?

Question B

What is the origin of life?

Exhibit G - Inline-Link Transition

Different changes on the hyperlink connection.

Home