Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To implement Bounce Out Right Animation Effect with CSS, you can try to run the following codeExample .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 bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } >/div> Reload page function myFunction() { location.reload(); }
The CSS background-image property is used to specify the background image. You can try to run the following code to implement the background-image property in CSS −Example #demo { border: 5px dashed red; padding: 10px; background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg"); } www.tutorialspoint.com Tutorials Point originated from the idea ... Read More
The CSS background-lip 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 in CSS −Example #demo { border: 5px dashed red; padding: 10px; background: orange; background-clip: padding-box; } ... Read More
To implement Bounce Out Left Animation Effect with CSS, you can try to run the following codeExample .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 bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } Reload page function myFunction() { location.reload(); }
To implement Bounce Up Animation Effect with CSS, you can try to run the following code −Example .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 bounceInUp { 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 bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } >/div> Reload page function myFunction() { location.reload(); }
To implement Bounce Out 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 bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } 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