To implement Bounce In Right 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: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes bounceInRight {             0% {                opacity: 0;                -webkit-transform: translateX(2000px);             }             60% {                opacity: 1;                -webkit-transform: translateX(-30px);             }             80% {                -webkit-transform: translateX(10px);             }             100% {                -webkit-transform: translateX(0);             }          }          @keyframes bounceInRight {             0% {                opacity: 0;                transform: translateX(2000px);             }             60% {                opacity: 1;                transform: translateX(-30px);             }             80% {                transform: translateX(10px);             }             100% {                transform: translateX(0);             }          }          .bounceInRight {             -webkit-animation-name: bounceInRight;             animation-name: bounceInRight;          }                           Reload page                function myFunction() {             location.reload();          }          

The CSS background-origin property is used to specify position of the background images.ExampleYou can try to run the following code to implement background-origin property:Live Demo                    #demo {             border: 5px dashed red;             padding: 10px;             background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");             background-origin: content-box;          }                              www.tutorialspoint.com          The website www.tutorialspoint.com ... Read More

To implement Bounce In Left 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: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes bounceInLeft {             0% {                opacity: 0;                -webkit-transform: translateX(-2000px);             }             60% {                opacity: 1;                -webkit-transform: translateX(30px);             }             80% {                -webkit-transform: translateX(-10px);             }             100% {                -webkit-transform: translateX(0);             }          }          @keyframes bounceInLeft {             0% {                opacity: 0;                transform: translateX(-2000px);             }             60% {                opacity: 1;                transform: translateX(30px);             }             80% {                transform: translateX(-10px);             }             100% {                transform: translateX(0);             }          }          .bounceInLeft {             -webkit-animation-name: bounceInLeft;             animation-name: bounceInLeft;          }                           Reload page                function myFunction() {             location.reload();          }          

To implement Bounce In Down 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: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes bounceInDown {             0% {                opacity: 0;                -webkit-transform: translateY(-2000px);             }             60% {                opacity: 1;                -webkit-transform: translateY(30px);             }             80% {                -webkit-transform: translateY(-10px);             }             100% {                -webkit-transform: translateY(0);             }          }          @keyframes bounceInDown {             0% {                opacity: 0;                transform: translateY(-2000px);             }             60% {                opacity: 1;                transform: translateY(30px);             }               80% {                transform: translateY(-10px);             }             100% {                transform: translateY(0);             }          }          .bounceInDown { -           webkit-animation-name: bounceInDown;             animation-name: bounceInDown;          }                           Reload page                function myFunction() {             location.reload();          }          

To implement Bounce In 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: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes bounceIn {             0% {                opacity: 0;                -webkit-transform: scale(.3);             }             50% {                opacity: 1;                -webkit-transform: scale(1.05);             }             70% {                -webkit-transform: scale(.9);             }             100% {                -webkit-transform: scale(1);             }          }          @keyframes bounceIn {             0% {                opacity: 0;                transform: scale(.3);             }             50% {                opacity: 1;                transform: scale(1.05);             }             70% {                transform: scale(.9);             }             100% {                transform: scale(1);             }          }          .bounceIn {             -webkit-animation-name: bounceIn;             animation-name: bounceIn;          }                           Reload page                function myFunction() {             location.reload();          }          

If you are writing your document using a character set other than ASCII or ISO-8859-1 you might want to set the @charset rule at the top of your stylesheet to indicate what character set the style sheet is written in.The @charset rule must be written right at the beginning of the style sheet without even space before it. The value is held in quotes and should be one of the standard character-sets.ExampleLet us see an example    

Bounce Animation effect is used to move the element quick up, back, or away from a surface after hitting it.ExampleYou can try to run the following code to implement bounce animation effect −Live 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;          }          @-webkit-keyframes bounce {             0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}             40% {-webkit-transform: translateY(-30px);}             60% {-webkit-transform: translateY(-15px);}          }          @keyframes bounce {             0%, 20%, 50%, 80%, 100% {transform: translateY(0);}             40% {transform: translateY(-30px);}             60% {transform: translateY(-15px);}          }          .bounce {             -webkit-animation-name: bounce;             animation-name: bounce;          }                           Reload page                function myFunction() {             location.reload();          }          

The CSS background-origin property is used to specify the position of the background images. You can try to run the following code to implement the background-image property −ExampleLive Demo                    #demo {             border: 5px dashed red;             padding: 10px;             background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");             background-origin: content-box;          }                              www.tutorialspoint.com   ... Read More

The animation is the process of creating motion effects and changes the appearance.CSS does support different animation effects to change the event motion.Under Animation, a concept Keyframes is used. Keyframes will control the intermediate animation steps in CSS3.The below example shows height, width, color, name, and duration of animation with keyframes syntax −Syntax@keyframes animation {    from {background-color: pink;}    to {background-color: green;} } div {    width: 100px;    height: 100px;    background-color: red;    animation-name: animation;    animation-duration: 5s; }

The CSS background-clip property is used to declare the painting area of the background. You can try to run the following code to implement the background-clip property with CSS −ExampleLive Demo                    #demo {             border: 5px dashed red;             padding: 10px;             background: orange;             background-clip: padding-box;          }                           ... Read More