• +62 (021) 990 769 37
  • Choose your language:

Blog

Insights and ideas for software startups. We provide advice and insights for entrepreneurs.

css3-animations-image

CSS3 Animations – How to with animation and keyframes – Trick

Are you tired of gifs and Flash? Well, even if you aren’t, CSS3 and HTML5 bring you the tools to create animations using CSS at 100%. I will show you how to crate a simple animation.

Create an animation

This is working with:

  • Chrome 4, Safari 4
  • Firefox 5
  • MSIE 10
  • Opera 12

With the classic CSS properties, the changes of background color etc. is possible but binary. With the transition and animations property from CSS3 it is possible to make it possible and progressively.

Our example will show how to change the transparency of the background color from an opacity of 0.4 to 1 and back to 0.4. A background image will also be animated from left to right.

the HTML Code

<p id="finder">
 <a href="#">Let's do it!</a>
</p>

the CSS Code

#finger a {
padding: 10px 10px 10px 77px;
/* for old browsers */
background:#9AD2F7 url(/content/uploads/2013/09/hand.png) no-repeagt 5px 10px;
/* for newest browsers */
background: rgba(0, 153, 255, 0.4) url(/content/uploads/2013/09/hand.png) no-repeat 5px 10px;
border: 1px solid #29BDCA;
border-radius: 5px;
}
p#finger a:hover, p#finger a:focus {
background-color:#09F; /* for old browsers */
color: black;
animation-name: finger; /* animation name */
animation-duration: 4s; /* duration of the animation */
animation-iteration-count: infinite; /* number of loops */
animation-timing-function: linear; /* accelaration type of the animation */
-webkit-animation: finger 4s infinite linear; /* simplier way of writing it for webkit browsers */
}
/* deuxieme etape */
@keyframes finger {
0% {background:rgba(0, 153, 255,0.4) url(/content/uploads/2013/09/hand.png) no-repeat 5px 10px;}
50% {background:rgba(0, 153, 255,1) url(/content/uploads/2013/09/hand.png) no-repeat 50px 10px;}
100% {background:rgba(0, 153, 255,0.4) url(/content/uploads/2013/09/hand.png) no-repeat 5px 10px;}
}
@-webkit-keyframes finger {
0% {background:rgba(0, 153, 255,0.4) url(/content/uploads/2013/09/hand.png) no-repeat 5px 10px;}
50% {background:rgba(0, 153, 255,1) url(/content/uploads/2013/09/hand.png) no-repeat 50px 10px;}
100% {background:rgba(0, 153, 255,0.4) url(/content/uploads/2013/09/hand.png) no-repeat 5px 10px;}
}

As you can see in the CSS above, the first step consists of, at least, give a name to the animation, a duration and the number of loops.
In the second step, we use the @keyframes to which we give the name of the animation we provided, we set the type a animation we want at the time we want. We can see that the time is in percentage of the global duration of the animation.

In our example, background opacity will change from 0.4 to 1 and back to 0.4 while the position of the background image will change from 5px to 50px and back to 5px.

You can see the result here:

Let’s do it !

Let me know below if this was useful to you and if you had any problem with this animation.

Antoine Leboulanger…

Full time Entrepreneur, Startup enthusiast, designer, programmer, system and network admin, "Expert in Network and System Engineering", yeap it's written on his degree...