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 77 of 130
CSS top property with Animation
The CSS top property specifies the vertical position of a positioned element. When combined with CSS animations, you can create smooth movement effects by animating changes to the top value over time. Syntax selector { top: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { top: value; } } Example: Animating Top Property The following example demonstrates how to animate the top property to create a ...
Read MoreAnimate CSS text-decoration-color property
The CSS text-decoration-color property controls the color of text decorations like underlines, overlines, and line-throughs. You can animate this property to create smooth color transitions in text decorations. Syntax selector { text-decoration-color: color; animation: animation-name duration timing-function; } Example: Animating Text Decoration Color The following example demonstrates how to animate the text-decoration-color property from the default color to orange − .animated-text { font-size: 24px; ...
Read MorePerform Animation on CSS perspective property
The CSS perspective property defines how far an element is placed from the view, giving it a 3D effect. When animated, it creates dynamic depth changes that make 3D transformations more or less pronounced over time. Syntax selector { perspective: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { perspective: initial-value; } to { perspective: final-value; } } Example The following example animates the perspective property to create a dynamic 3D effect on a ...
Read MoreCSS voice-pitch Speech Media property
The CSS voice-pitch property is used to set the baseline pitch of the speaking voice when using speech synthesis. This property controls how high or low the voice sounds during text-to-speech output. Syntax selector { voice-pitch: value; } Possible Values ValueDescription x-lowSets an extremely low pitch lowSets a low pitch mediumSets a medium pitch (default) highSets a high pitch x-highSets an extremely high pitch Example: Setting Voice Pitch The following example demonstrates different voice pitch values − ...
Read MorePerform Animation on CSS padding-top property
The CSS padding-top property can be animated using CSS animations or transitions. This creates smooth visual effects where the top padding of an element gradually changes over time. Syntax @keyframes animation-name { from { padding-top: initial-value; } to { padding-top: final-value; } } selector { animation: animation-name duration timing-function iteration-count; } Example: Animating padding-top Property The following example demonstrates how to animate the padding-top property using CSS keyframes − .container { ...
Read MoreCSS speak-as Speech Media property
The CSS speak-as property is part of the Speech Media module and controls how text should be rendered by speech synthesizers. It determines whether text should be spoken normally, spelled out letter by letter, or treated as digits. Syntax selector { speak-as: value; } Possible Values ValueDescription autoDefault behavior based on content type normalSpeaks the text normally spell-outSpells out text letter by letter digitsSpeaks numbers as individual digits literal-punctuationSpeaks punctuation marks literally no-punctuationIgnores punctuation when speaking Example: Spell-Out Text The following example makes abbreviations spell out ...
Read MoreAnimate CSS padding-left property
The CSS padding-left property can be animated to create smooth transitions that change the left padding of an element over time. This creates a visual effect where content moves horizontally as the padding increases or decreases. Syntax selector { animation: animation-name duration timing-function; } @keyframes animation-name { from { padding-left: initial-value; } to { padding-left: final-value; } } Example The following example animates the padding-left property from 0px to 50px and back − ...
Read MoreCSS voice-range Speech Media property
The CSS voice-range property is used to control the range of pitch variation in speech synthesis. It defines how much the pitch can vary from the base pitch when content is read aloud by screen readers or speech synthesizers. Syntax selector { voice-range: value; } Possible Values ValueDescription x-lowVery narrow pitch range lowNarrow pitch range mediumNormal pitch range (default) highWide pitch range x-highVery wide pitch range frequencySpecific frequency value (e.g., 90Hz) Example: Setting Voice Range with Keywords The following example demonstrates different voice range settings − ...
Read MorePerform Animation on CSS margin-top
CSS margin-top animations allow you to create smooth transitions by changing an element's top margin over time. This is commonly used for creating sliding effects and dynamic spacing animations. Syntax @keyframes animation-name { from { margin-top: initial-value; } to { margin-top: final-value; } } selector { animation: animation-name duration timing-function iteration-count; } Example: Basic Margin-Top Animation The following example demonstrates a smooth margin-top animation that moves an element down and back up − ...
Read MorePerform Animation on CSS min-width
The CSS min-width property can be animated to create dynamic width transitions. This property sets the minimum width of an element, and when animated, it smoothly transitions between different minimum width values. Syntax selector { animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { min-width: value; } } Example: Animating min-width Property The following example demonstrates how to animate the min-width property using CSS keyframes − ...
Read More