Fade In and Grow Effects

Objective

Hi! This pen shows how to use fade in an element using opacity and how to grow a text using scale. Additionally, it is show a transformation effect during the button hover and its appearance.

Transitions used

• ease-in: during the initial welcome message hiding and also to show the new welcome message
• cubic-bezier: during the button hover effect
• ease: to ease the text transformation in the new welcome message