Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS Articles
Page 99 of 130
CSS transition-timing-function property
The CSS transition-timing-function property specifies the speed curve of the transition effect. It controls how intermediate values are calculated during a transition, determining whether the animation starts slowly and speeds up, or starts quickly and slows down. Syntax selector { transition-timing-function: value; } Possible Values ValueDescription linearConstant speed from start to end easeSlow start, fast middle, slow end (default) ease-inSlow start, then speeds up ease-outFast start, then slows down ease-in-outSlow start and end, fast middle cubic-bezier()Custom timing function using cubic bezier curve Example: Different Timing Functions ...
Read MoreSet the name of the CSS property the transition effect is for
The CSS transition-property property specifies which CSS property should have a transition effect applied to it. This property determines which property changes will be animated when the element's state changes. Syntax selector { transition-property: property-name; } Possible Values ValueDescription noneNo transition effect will be applied allAll properties that can be animated will have transition effects (default) property-nameSpecific CSS property name like width, height, background-color, etc. initialSets the property to its default value inheritInherits the value from parent element Example: Width Transition The following example demonstrates a ...
Read MoreCSS transition-duration property
The CSS transition-duration property is used to set the duration of CSS transitions. It specifies how long a transition takes to complete when an element changes from one state to another. Syntax selector { transition-duration: time; } Possible Values ValueDescription timeDuration in seconds (s) or milliseconds (ms) 0sNo transition (default) inheritInherits from parent element Example: Basic Transition Duration The following example demonstrates a 2-second transition duration on hover − .box { ...
Read MoreSet a delay for the CSS transition effect
The CSS transition-delay property is used to specify a delay before a transition effect begins. This allows you to control when the transition starts after the trigger event occurs. Syntax selector { transition-delay: time; } Possible Values ValueDescription timeSpecifies the delay in seconds (s) or milliseconds (ms) 0No delay (default) Example The following example demonstrates a 2-second delay before the width transition begins − div { width: 150px; ...
Read MoreCSS Transition property
The CSS transition property allows you to create smooth animations when CSS properties change. It combines all four transition-related properties (transition-property, transition-duration, transition-timing-function, and transition-delay) into a single shorthand declaration. Syntax selector { transition: property duration timing-function delay; } Possible Values PropertyDescriptionDefault propertyCSS property to animate (or 'all')all durationAnimation duration (s or ms)0s timing-functionSpeed curve (ease, linear, ease-in, etc.)ease delayDelay before animation starts0s Example: Basic Height Transition The following example creates a smooth height transition when hovering over a box − ...
Read MoreCSS animation-duration property
The CSS animation-duration property specifies how long an animation should take to complete one full cycle. This property controls the speed of your animations by setting the time duration. Syntax selector { animation-duration: time; } Possible Values ValueDescription timeSpecifies the duration in seconds (s) or milliseconds (ms) 0sDefault value. No animation occurs Example: 2-Second Animation Duration The following example creates a moving and color-changing animation that completes in 2 seconds − div { ...
Read MoreAdd CSS transition effect for both the width and height property
To add transition effects for both the width and height properties of an element, you can use the CSS transition property. This creates smooth animations when these properties change, such as on hover or focus states. Syntax selector { transition: width duration, height duration; /* or */ transition: width duration, height duration, ease-function, delay; } Example: Transitioning Width and Height on Hover The following example demonstrates how to add transition effects for both width and height properties when hovering over a box ...
Read MoreHow to create a transition effect with CSS?
CSS transitions allow you to smoothly animate changes in CSS properties over a specified duration. They create smooth visual effects when elements change state, such as on hover or focus. Syntax selector { transition: property duration timing-function delay; } Possible Values PropertyDescription propertyCSS property to animate (width, height, color, etc.) durationTime the transition takes (in seconds or milliseconds) timing-functionSpeed curve (ease, linear, ease-in-out, etc.) delayDelay before transition starts (optional) Example: Width Transition on Hover The following example creates a smooth width transition when hovering over a ...
Read MoreBuild a radial gradient with the shape of a circle
The CSS radial-gradient property allows you to create circular gradient effects by specifying the circle shape parameter. This creates a gradient that radiates outward from a central point in a perfect circular pattern. Syntax selector { background: radial-gradient(circle, color1, color2, color3, ...); } Example: Circle-Shaped Radial Gradient The following example creates a circular radial gradient with multiple colors − #demo { height: 300px; width: ...
Read MoreHow to work with CSS Transitions?
CSS transitions allow you to change property values smoothly over a specified duration, creating smooth animations between different states. This provides a better user experience by making changes appear gradual rather than instant. Syntax selector { transition: property duration timing-function delay; } Transition Properties PropertyDescriptionDefault Value transition-propertySpecifies which CSS property to transitionall transition-durationDefines how long the transition takes0s transition-timing-functionSpecifies the speed curve of transitionease transition-delayDefines when the transition will start0s Example: Basic Width Transition The following example demonstrates a smooth width transition on hover − ...
Read More