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 78 of 130
Animate transform-origin property with CSS Animation
The CSS transform-origin property defines the point around which a transformation is applied. When animated, you can create dynamic effects where the rotation or scaling point changes during the animation. Syntax selector { transform-origin: x-axis y-axis z-axis; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { transform-origin: new-x new-y new-z; } } Possible Values ValueDescription lengthSpecific distance from the left/top edge (px, em, rem) percentagePercentage of ...
Read MoreCSS rest-before Speech Media property
The CSS rest-before property is used in speech media to set a pause or rest period before speaking the content of an element. This property is part of the CSS Speech Module and helps control the timing and flow of synthesized speech. Syntax selector { rest-before: value; } Possible Values ValueDescription timeSpecifies the pause duration in seconds (s) or milliseconds (ms) noneNo pause before the element (default) x-weakVery short pause weakShort pause mediumMedium pause strongLong pause x-strongVery long pause Example: Setting Rest Before Elements The following ...
Read MoreCSS voice-duration Speech Media property
The CSS voice-duration property is used to control the duration of speech synthesis when synchronizing speech with other media elements. This property is part of CSS Speech Module and helps in creating timed audio presentations. Syntax selector { voice-duration: value; } Possible Values ValueDescription autoUses the natural duration based on inherited voice-rate (default) timeSpecifies exact duration using time units (s, ms) Example: Setting Speech Duration The following example sets a specific duration for speech synthesis − ...
Read MoreCSS voice-balance Speech Media property
The CSS voice-balance property controls the horizontal positioning of synthesized speech in a stereo field. This property determines whether the voice appears to come from the left, center, or right channel when using text-to-speech functionality. Syntax selector { voice-balance: value; } Possible Values ValueDescription leftVoice appears to come from the left channel centerVoice appears centered in the stereo field (default) rightVoice appears to come from the right channel leftwardsVoice shifts toward the left rightwardsVoice shifts toward the right Example: Setting Voice Balance The following example demonstrates ...
Read MorePerform Animation on CSS max-width
The CSS max-width property can be animated to create dynamic width transitions. This is particularly useful for creating responsive layouts, expandable containers, or smooth resizing effects. Syntax selector { max-width: value; animation: animation-name duration; } @keyframes animation-name { percentage { max-width: value; } } Example: Basic max-width Animation The following example demonstrates a smooth transition of the max-width property from its initial state to 250px − ...
Read MoreCSS rest Speech Media property
The CSS rest property is a shorthand property for rest-before and rest-after properties. It sets a pause before or after an element when using speech synthesis or screen readers. Syntax selector { rest: rest-before rest-after; } Where: rest-before − Sets the pause duration before the element is spoken rest-after − Sets the pause duration after the element is spoken Possible Values ValueDescription timeDuration in seconds (s) or milliseconds (ms) noneNo pause (default value) x-weakVery short pause weakShort pause mediumMedium pause strongLong pause x-strongVery long pause ...
Read MoreCSS voice-stress Speech Media property
The CSS voice-stress property controls the level of stress or emphasis applied to spoken text in speech synthesis. This property adjusts characteristics like pitch variation and intensity to convey different levels of emphasis when content is read aloud by screen readers or text-to-speech software. Syntax selector { voice-stress: value; } Possible Values ValueDescription normalDefault stress level with natural emphasis strongHigh stress with increased pitch variation and intensity moderateMedium stress level between normal and strong reducedLower stress with minimal pitch variation noneNo stress applied, monotone speech Example: Strong ...
Read MorePerform Animation on CSS opacity
The CSS opacity property controls the transparency of an element. When combined with CSS animations, you can create smooth fade-in and fade-out effects that enhance user experience on web pages. Syntax @keyframes animation-name { from { opacity: start-value; } to { opacity: end-value; } } selector { animation: animation-name duration timing-function iteration-count; } Possible Values ValueDescription 0Completely transparent (invisible) 0.550% transparent 1Completely opaque (fully visible) Example: Fade Animation The following example demonstrates opacity animation with multiple overlapping ...
Read MorePerform Animation on CSS line-height property
The CSS line-height property can be animated to create smooth transitions between different line spacing values. This is useful for creating dynamic text effects where the vertical spacing between lines changes over time. Syntax selector { line-height: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { line-height: initial-value; } to { line-height: final-value; } } Example: Basic Line Height Animation The following example demonstrates how to animate the line-height property from 20px to 50px ...
Read MoreAnimate CSS column-rule-color property
The CSS column-rule-color property defines the color of the rule (line) between columns in a multi-column layout. You can animate this property to create dynamic visual effects where the column divider changes color over time. Syntax selector { column-rule-color: color; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { column-rule-color: initial-color; } to { column-rule-color: final-color; } } Example The following example demonstrates animating the column-rule-color property from orange to black − ...
Read More