The cue property is a shorthand for setting cue-before and cue-after. If two values are given, the first value is cue-before and the second is cue-after. If only one value is given, it applies to both properties.ExampleFor example, the following two rules are equivalent −    

This property specifies a sound to be played before speaking an element's content to delimit it from other. The possible values are −url − The URL of a sound file to be played.none − Nothing has to be played.ExampleYou can try to run the following code to implement cue-before property in CSS    

An Element can turn over or cause to turn over with a sudden quick movement.ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;   ... Read More

A sudden brief burst of bright light of an element creates a Flash effect.ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @keyframes flash {             0%, 50%, 100% {                opacity: 1;             }             25%, 75% {                opacity: 0;             }          }          .flash {             animation-name: flash;          }                           Reload page                function myFunction() {             location.reload();          }          

To implement Fade Out Up Big Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes fadeOutUpBig {             0% {                opacity: 1;                -webkit-transform: translateY(0);             }             100% {                opacity: 0;                -webkit-transform: translateY(-2000px);             }          }          @keyframes fadeOutUpBig {             0% {                opacity: 1;                transform: translateY(0);             }             100% {                opacity: 0;                transform: translateY(-2000px);             }          }          .fadeOutUpBig {             -webkit-animation-name: fadeOutUpBig;             animation-name: fadeOutUpBig;          }                           Reload page                function myFunction() {             location.reload();          }          

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 absolute page box. If only one length value is specified, it sets both the width and height of the page box. Percentage values are ... Read More

To implement Fade Out Up Animation Effect on an image with CSS, you can try to run the following codeExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes fadeOutUp {             0% {                opacity: 1;                -webkit-transform: translateY(0);             }             100% {                opacity: 0;                -webkit-transform: translateY(-20px);             }          }          @keyframes fadeOutUp {             0% {                opacity: 1;                transform: translateY(0);             }             100% {                opacity: 0;                transform: translateY(-20px);             }          }          .fadeOutUp {             -webkit-animation-name: fadeOutUp;             animation-name: fadeOutUp;          }                           Reload page                function myFunction() {            location.reload();          }          

The elevation property sets where the sound should come from vertically. The possible values are as follows −angle − Specifies the elevation as an angle, between -90deg and 90deg. 0deg means on the forward horizon, which loosely means level with the listener. 90deg means directly overhead and -90deg means directly below.below − Same as '-90deg'.level − Same as '0deg'.above − Same as '90deg'.higher − Adds 10 degrees to the current elevation.lower − Subtracts 10 degrees from the current elevation.You can try to run the following code to implement CSS elevation property −    

This property specifies whether the text will be rendered aurally and if so, in what manner. The possible values are −none − Suppresses aural rendering so that the element requires no time to render.normal − Uses language-dependent pronunciation rules for rendering an element and its children.spell-out − Spells the text one letter at a time.Note the difference between an element whose 'volume' property has a value of 'silent' and an element whose 'speak' property has the value 'none'. The former takes up the same time as if it had been spoken, including any pause before and after the element, but no ... Read More

Animations never fail to attract people in. When you present them with a painting and a video, they will always focus on the moving image since it is more visually appealing. Thus, the best method to get people to visit your website is to incorporate animations. The things you can accomplish using CSS animations are endless. A few lines of code can be used to generate stunning and interesting animations. All you need to do is adjust the direction and give a few parameters. For getting better understanding on implemeneting the fade out right big animation effect with CSS let's ... Read More