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
Articles by Ankith Reddy
Page 20 of 73
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 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 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 MoreWhich CSS property is used to run Animation in Reverse Direction?
The CSS animation-direction property is used to run animation in reverse direction. This property controls whether an animation should play forwards, backwards, or alternate back and forth. Syntax selector { animation-direction: value; } Possible Values ValueDescription normalAnimation plays forward (default) reverseAnimation plays in reverse direction alternateAnimation plays forward, then backward alternate-reverseAnimation plays backward, then forward Example: Reverse Animation Direction The following example shows how to run an animation in reverse direction using the reverse value − ...
Read MoreWith CSS set the element to retain the style values that is set by the first keyframe
The CSS animation-fill-mode property with the backwards value makes an element retain the style values defined in the first keyframe (the from or 0% state) before the animation begins. This is particularly useful when you want the element to appear in its starting animation state during any animation delay. Syntax selector { animation-fill-mode: backwards; } Example The following example demonstrates how animation-fill-mode: backwards applies the first keyframe styles before the animation starts − .box { ...
Read MoreCreate a transparent box with CSS
Creating a transparent box in CSS allows you to make elements semi-transparent, revealing content behind them. The most common approach is using the opacity property, which controls the transparency level of an entire element. Syntax selector { opacity: value; } Possible Values ValueDescription 0Completely transparent (invisible) 0.1 - 0.9Semi-transparent (decimal values) 1Completely opaque (default) Example The following example demonstrates how to create transparent boxes with different opacity levels − div { ...
Read MoreStyle the document's root element with CSS
The CSS :root pseudo-class selector targets the document's root element. In HTML documents, this is the element. It's commonly used to define CSS custom properties (variables) and global styles. Syntax :root { property: value; } Example 1: Basic Root Element Styling The following example applies background and text color to the root element − :root { background: blue; color: white; ...
Read MoreRole of CSS :only-of-type Selector
The CSS :only-of-type pseudo-class selector is used to style elements that are the only child of their specific type within their parent container. It targets elements that have no siblings of the same element type. Syntax element:only-of-type { /* CSS properties */ } Example: Basic Usage The following example demonstrates how :only-of-type selects paragraph elements that are the only element within their parent − p:only-of-type { background: orange; ...
Read MoreX-axis 3D transform with CSS3
The CSS rotateX() function is used to rotate an element around its X-axis in 3D space. This creates a horizontal rotation effect, making the element appear to flip vertically. Syntax selector { transform: rotateX(angle); } The angle value can be specified in degrees (deg) or radians (rad). Example The following example demonstrates X-axis 3D rotation by comparing a normal element with a rotated one − div { width: 200px; ...
Read MoreStyle links on mouse over with CSS
To style links on mouse over with CSS, use the :hover pseudo-selector. This selector allows you to apply styles when a user hovers their mouse cursor over an element. Syntax a:hover { property: value; } Example: Basic Link Hover Effect The following example changes the background color of a link when you hover over it − a { text-decoration: none; padding: 10px 15px; ...
Read More