Simple animated moving background images using CSS3 with Keyframes | 2my4edge

05 May 2015

Simple animated moving background images using CSS3 with Keyframes

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.

animated moving background
DOWNLOAD             LIVE DEMO

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
<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;

No comments:

Post a Comment

^