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
Web Development Articles
Page 639 of 801
Set an animation with a slow start, then fast, and end slowly with CSS
The CSS animation-timing-function property with the ease value creates animations that start slowly, speed up in the middle, and then slow down at the end. This creates a natural, smooth animation effect that feels more realistic than linear timing. Syntax selector { animation-timing-function: ease; } Example The following example demonstrates an animation with ease timing that moves a yellow box horizontally − div { width: 150px; ...
Read MoreSelect elements whose attribute value contains a specified value with CSS
The CSS [attribute*="value"] selector is used to select elements whose attribute value contains a specified substring. This selector matches any element where the attribute contains the specified value anywhere within it. Syntax [attribute*="value"] { /* CSS properties */ } How It Works The asterisk (*) in the selector means "contains". The selector will match any element where the specified attribute contains the given value as a substring, regardless of its position within the attribute value. Example: Selecting Images by Alt Text The following example selects all images whose ...
Read MoreRun Animation backward first and then forwards with CSS
The CSS animation-direction property controls the direction of animation playback. Using the alternate-reverse value, you can run an animation backwards first, then forwards, creating a smooth back-and-forth effect. Syntax selector { animation-direction: alternate-reverse; } Possible Values ValueDescription normalAnimation plays forward (default) reverseAnimation plays backward alternateAnimation alternates between forward and backward alternate-reverseAnimation starts backward, then alternates Example The following example demonstrates an animation that runs backward first, then forwards using alternate-reverse − .animated-box { ...
Read MoreHow to delay an animation with CSS
To delay an animation, use the CSS animation-delay property. This property specifies the amount of time to wait before starting the animation sequence. Syntax selector { animation-delay: time; } Possible Values ValueDescription timeSpecifies the delay time in seconds (s) or milliseconds (ms) 0sDefault value - no delay Negative valuesAnimation starts immediately but from a later point in the cycle Example: Basic Animation Delay The following example delays an animation by 2 seconds before it starts − ...
Read MoreSelects every element whose href attribute value ends with ".htm" with CSS
The CSS [attribute$="value"] selector targets elements whose specified attribute value ends with a particular string. In this case, we're selecting elements whose href attribute ends with ".htm". Syntax [attribute$="value"] { /* CSS properties */ } Example The following example selects all anchor elements whose href attribute ends with ".htm" and applies orange border styling − [href$=".htm"] { border: 5px solid ...
Read MoreCreate a sticky navbar with CSS
A sticky navbar is a navigation bar that sticks to a specific position on the page when scrolling. To create a sticky navbar, use the position: sticky property along with the top property to define where it should stick. Syntax selector { position: sticky; top: value; } Example The following example creates a sticky navbar that remains at the top of the viewport when scrolling − body { ...
Read MoreCSS 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 More