Front End Technology Articles - Page 589 of 745

Bounce Out Down Animation Effect with CSS

CSS Web Development Front End Technology

Updated on 26-Jun-2020 08:19:10

119 Views

To implement Bounce Out 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 bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } Reload page function myFunction() { location.reload(); }

Bounce Out Animation Effect with CSS

CSS Web Development Front End Technology

Arjun Thakur

Updated on 16-Mar-2020 08:01:05

161 Views

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(); }

Bounce In Right Animation Effect with CSS

CSS Web Development Front End Technology

Samual Sam

Updated on 26-Jun-2020 08:17:25

212 Views

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(); }

CSS background-origin property

CSS Web Development Front End Technology

Chandu yadav

Updated on 26-Jun-2020 08:16:48

201 Views

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

Bounce In Left Animation Effect with CSS

CSS Web Development Front End Technology

Lakshmi Srinivas

Updated on 26-Jun-2020 08:16:05

163 Views

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(); }

Bounce In Down Animation Effect with CSS

CSS Web Development Front End Technology

George John

Updated on 26-Jun-2020 08:15:14

183 Views

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(); }

Bounce In Animation Effect with CSS

CSS Web Development Front End Technology

Samual Sam

Updated on 16-Mar-2020 07:58:10

151 Views

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(); }

Usage of CSS @charset rule

CSS Web Development Front End Technology

Ankith Reddy

Updated on 16-Mar-2020 07:57:31

142 Views

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 with CSS

CSS Web Development Front End Technology

Lakshmi Srinivas

Updated on 16-Mar-2020 07:56:05

345 Views

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(); }

Specify position of the background images with CSS

CSS Web Development Front End Technology

Arjun Thakur

Updated on 16-Mar-2020 07:55:22

166 Views

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