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 98 of 130
How to set the fill-mode for an Animation with CSS
The CSS animation-fill-mode property defines which values are applied by the animation before it starts and after it ends. This property controls whether an element retains the animation's initial or final styles when the animation is not running. Syntax selector { animation-fill-mode: value; } Possible Values ValueDescription noneDefault. Animation does not apply any styles before or after execution forwardsElement retains the styles from the last keyframe after animation ends backwardsElement gets the styles from the first keyframe before animation starts bothAnimation follows rules for both forwards and backwards ...
Read MoreLinear gradient with rainbow color
The CSS linear-gradient function can be used to create beautiful rainbow effects by combining all seven colors of the rainbow spectrum. A rainbow gradient provides a smooth transition from red through violet, creating an eye-catching visual effect. Syntax selector { background: linear-gradient(direction, red, orange, yellow, green, blue, indigo, violet); } Example: Rainbow Linear Gradient The following example creates a horizontal rainbow gradient using all seven spectrum colors − #demo { height: 100px; ...
Read MoreSet an animation with a slow start and end using CSS
The CSS animation-timing-function property controls the speed curve of animations. Use the ease-in-out value to create animations that start slowly, speed up in the middle, and slow down at the end for smooth, natural motion. Syntax selector { animation-timing-function: ease-in-out; } Possible Values ValueDescription ease-in-outSlow start and slow end easeSlow start, fast middle, slow end (default) ease-inSlow start only ease-outSlow end only linearConstant speed throughout Example The following example demonstrates an animation with slow start and end using ease-in-out − ...
Read MoreSelects all elements with class="mydemo" with CSS
To select all elements with class="mydemo", you can use the CSS class selector. The class selector is denoted by a period (.) followed by the class name. Syntax .classname { /* CSS properties */ } Example The following example demonstrates how to select and style all elements with class="mydemo" − .mydemo { background-color: #f0f8ff; border: 2px dashed orange; ...
Read MoreSet 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 More