Introduction to CSS Transitions

What are CSS Transitions?

The CSS Transitions allow changes in CSS property values to occur over a specified duration rather than happening instantly. This makes visual changes smoother, softly and more appealing.

Look out the Mouse over the element below to see a CSS transition effect

CSS Transition Properties

CSS Transition Property

• The transition property defines the specific CSS properties that will change smoothly background-color, transform, width, opacity. If multiple properties need transitions, they can be listed, separated by commas. Default all, all properties will transition.

Before Hover over the div element below, to see the transition effect

After Hovering over the div element below, to see the transition effect

CSS transition property after hover the element watch in video below

Transition-duration Property Usage

• The transition-duration property Specifies how long the transition should take to complete in seconds and milliseconds. If different properties have different durations, they can be listed in the same order as transition-property.

The CSS Transition Duration Property Video

Browser support for timing duration property

CSS Transition-timing-function Property

• The transition timing function defines how the intermediate states of the transition are calculated. Common values are.
  • The ease start slow and speed up fast, then slow down is default.
  • The linear constant speed from start to end.
  • The ease-in start slow and then speed up so quickly.
  • The ease-out start fast but then slow down.
  • The ease-in-out slow at both the start and end.
  • The Cubic-bezier functions custom timing functions like cubic-bezier 0.25, 0.1, 0.25, 1.

Timing Function Property Video

CSS Transition-delay

• The Timing delay property sets a delay before the transition starts from 1s will wait 1 second before starting the transition.

Timing delay Property Video

CSS Hover Effects and Dropdown links

What is the :hover Pseudo-Class ?

The :hover pseudo-class applies styles when the user hovers over an element can be applied on buttons, links and product cards. It’s widely used for interactive effects. It can be applied to any element, not just links.

CSS Hover Effects

The Hover on Buttons Change background color, add shadows, scale up the size, or change the text color on hover.

CSS Hover on div tag element.

Mouse Hover on Links Change the color or underline the text.

Mouse Hover on Product Cards Apply hover effects to product cards to increase the scale slightly, add a box shadow, or change the border.

Creating Hover Menus & Dropdown tabs

What is a Hover Menu?

• A hover menu is a hidden element that becomes visible only when its parent is a product card is hovered. Common uses include quick view, add to wishlist, and compare buttons on product cards.

CSS Mouse Hover on Home page link to change the background color red.

CSS Dropdown Menu in Navigation Bar

Mouse Hover over the Dropdown link to see the dropdown menu.

Introduction to CSS Animations

What are CSS Animations ?

The CSS animations allow the values of CSS properties to change smoothly over time, using keyframes. Unlike transitions, which define changes between two states normal and hover, animations can define multiple stages and apply more complex effects.

Key Concepts of CSS animations names and animation duration

• The CSS @keyframes rule defines the stages of the animation. Each keyframe represents a percentage of the animation duration from 0% is the start, 100% is the end.

CSS Animations changing html elements colors

• The CSS Animation-name property specifies the name of the @keyframes animation to apply to an element.

The CSS animation name moving html element to moving forward

• The CSS Animation-duration property specifies how long the animation will take to complete for 1s for 1 second.

CSS animation duration the animation should complete one cycle in 3 seconds

• The CSS Animation-iteration-count property defines how many times the animation will play for 1, infinite, or an specific number.

Play the CSS animation two times

• The CSS Animation-timing-function property specifies the speed curve of the animation are similar to Timing-transition-function. Common values are ease, linear, ease-in, ease-out, and ease-in-out.

Play an animation with the same speed from beginning to end

• The CSS Animation-delay sets a delay before the animation starts.

• The CSS Animation-fill-mode defines what styles should apply to the element before and after the animation. Common values are as under.
• The forwards retains the final state of the animation and backwards applies the starting styles during the delay period and last both Combines both behaviors.

Let the div element retain the style values from the last keyframe when the animation ends