Here i'm going to post about animated like moving background image from bottom to top and top to bottom like that, for that we are going to use keyframes in css3 to make move on percentage of background position. this is very simple one, this kind of background images are highly using in social media index login and register pages, lets see the simple coding.
Here we are going to use only CSS. html code is only for the class or id for where we have to display.
so here im going to give background image for whole body. so i'm giving id in body tag like the below code
HTML
<body id="moving_bg"></body>
CSS
So, here in the keyframes css you can change as you need, if you want bottom to top 0% to 100% is to bottom to top. and you can change the background positions for diagonal moves. and here i gave -660px is to avoid shaking while image moving. that is height of that background image. that will avoid image shaking while moving background image. and you can fix the animation time like
<style type="text/css"> #moving_bg{ background: url(moving-image.png) 0 0; -webkit-animation: backgroundmove 5s linear 0s infinite normal; -moz-animation: backgroundmove 5s linear 0s infinite normal; -ms-animation: backgroundmove 5s linear 0s infinite normal; -o-animation: backgroundmove 5s linear 0s infinite normal; animation: backgroundmove 5s linear 0s infinite normal; } @-webkit-keyframes backgroundmove{ 100%{background-position:50% 0} 0%{background-position:50% -660px} } @-moz-keyframes backgroundmove{ 100%{background-position:50% 0} 0%{background-position:50% -660px} } @-ms-keyframes backgroundmove{ 100%{background-position:50% 0} 0%{background-position:50% -660px} } @keyframes backgroundmove{ 100%{background-position:50% 0} 0%{background-position:50% -660px}} </style>
So, here in the keyframes css you can change as you need, if you want bottom to top 0% to 100% is to bottom to top. and you can change the background positions for diagonal moves. and here i gave -660px is to avoid shaking while image moving. that is height of that background image. that will avoid image shaking while moving background image. and you can fix the animation time like
animation: backgroundmove 5s linear 0s infinite normal;
i hope this post is really interesting and useful to you, thanks for visiting. keeping in touch for more updates.
RELATED POSTS :
Change background on refresh using Java script
Change text & background color while selecting text using CSS3
Go back to previous and next page onClick in browser using Javascript
How to make fixed background image for all browser using Css
Create .gif animated image in photoshop
Animated scroll to top by using Jquery
How to create an animated .jpg image
Image slider with random animation effects using Jquery
Portfolio Design and sorting with Animation Effect
No comments:
Post a Comment