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 659 of 801
Flip Animation Effect with CSS
The CSS flip animation effect creates a 3D rotation that makes an element appear to turn over or flip around its Y-axis. This effect uses CSS transforms and keyframes to create smooth, eye-catching animations. Syntax selector { animation: flip duration timing-function; transform: perspective(distance) rotateY(angle); } Example The following example demonstrates a flip animation effect that rotates an element 360 degrees with perspective − .flip-container { width: 200px; ...
Read MoreFlash Animation Effect with CSS
The CSS flash animation effect creates a sudden brief burst of bright light by rapidly alternating an element's opacity between visible and invisible states. This creates a strobe-like flashing effect that draws attention to specific elements. Syntax @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { animation: flash duration timing-function ...
Read MoreFade Out Up Big Animation Effect with CSS
The CSS Fade Out Up Big animation creates a dramatic exit effect where an element fades out while moving upward by a large distance. This animation is perfect for removing elements with an impactful visual transition. Syntax @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); ...
Read MoreValues to set page size in CSS
The CSS @page rule's size property controls the dimensions and orientation of printed pages. There are four values that can be used to set page size − auto − The page box will be set to the size and orientation of the target sheet. landscape − Overrides the target's orientation. The page box is the same size as the target, and the longer sides are horizontal. portrait − Overrides the target's orientation. The page box is the same size as the target, and the shorter sides are horizontal. length − Length values for the 'size' property create an ...
Read MoreFade Out Up Animation Effect with CSS
The CSS fade out up animation effect creates a smooth transition where an element gradually fades out while moving upward. This effect is commonly used for removing elements from view with a subtle upward motion. Syntax @keyframes fadeOutUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-distance); ...
Read MoreCSS elevation Property
The elevation property in CSS sets the vertical position of a sound source in 3D audio space. This property is part of the aural stylesheet properties designed for speech synthesizers and audio browsers. Syntax selector { elevation: value; } Possible Values ValueDescription angleSpecifies elevation as an angle between -90deg and 90deg belowSame as -90deg (directly below the listener) levelSame as 0deg (on the forward horizon) aboveSame as 90deg (directly overhead) higherAdds 10 degrees to the current elevation lowerSubtracts 10 degrees from the current elevation Example The ...
Read MoreCSS speak property
The CSS speak property controls how text content is rendered by screen readers and other assistive technologies. It determines whether text should be spoken aloud and how it should be pronounced when read by speech synthesis software. Syntax selector { speak: value; } Possible Values ValueDescription noneSuppresses aural rendering so that the element requires no time to render normalUses language-dependent pronunciation rules for rendering an element and its children spell-outSpells the text one letter at a time Example: Different Speak Values The following example demonstrates different ...
Read MoreFade Out Right Big Animation Effect with CSS
Animations never fail to attract people. When you present them with a painting and a video, they will always focus on the moving image since it is more visually appealing. The fade out right big animation creates a dramatic exit effect where elements fade away while sliding to the right with increased scale, adding visual impact to your web interfaces. Syntax @keyframes fadeOutRightBig { from { opacity: 1; transform: translateX(0); } ...
Read MoreFade Down Big Animation Effect with CSS
The CSS Fade Down Big animation effect creates a dramatic exit animation where an element fades out while moving downward by a large distance. This animation is commonly used for dramatic page transitions or removing elements from view. Syntax @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; ...
Read MoreBounce Out Right Animation Effect with CSS
The CSS Bounce Out Right animation effect creates a bouncing motion where an element slides to the right while fading out. The animation starts with a slight leftward movement before bouncing out to the right side of the screen. Syntax @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .element { animation: bounceOutRight duration timing-function; } Example The following example demonstrates the bounce ...
Read More