To implement Flip In Y Animation effect 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: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: ... Read More

To implement Flip In X Animation effect 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: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: ... Read More

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 −