CSS3 Animations – Part 3

So today we’re once again visiting the @keyframes rule to animate some fun stuff on the screen – today a sale parachute. Why? Well, why not!

Here is the CSS3 animation We’ll be covering.

For those who are new to this blog and CSS3 animations in general I suggest you start with the CSS3 Animations article for a basic grounding of what’s going on here.

As usual I won’t be going into great detail with the code – I’ll let you take a look at each line to see what’s going on. Basically we’ve got a div with an image in it and come css controlling the animation through a series of position and angle transitions.

Here’s the HTML

<div id="motion3"><img alt="png 24 para" style=";height:auto;;position:inherit !important;" indx="57982382" rank="5" irank="261294697" atitle="CSS3 Animations – Part 3" data-src="//liquid.gallery/wp-content/uploads/2014/07/png-24-para.png" data-srcset="" class="rs-article-img-src do-lazy">
</div>

Here’s the CCS

#motion3 {
  width:249px;
height:329px;
position:relative;
-webkit-animation-name:myfirst4;
-webkit-animation-duration:20s;
-webkit-animation-timing-function:linear;
-webkit-animation-fill-mode: forwards;
  -webkit-animation-delay:2s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
  -webkit-backface-visibility: hidden; 
  -webkit-perspective: 1000;
animation-name:myfirst4;
animation-duration:20s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:1;
animation-direction:alternate;
animation-play-state:running;
}

  @-webkit-keyframes myfirst4{
0%   {left:10px; top:5px; width: 5px; height: 20px;  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
10% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}
20% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate-2(0deg);}
30% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}
40% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate-2(0deg);}
50% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}
60% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate-2(0deg);}
70% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}
80% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate-2(0deg);}
100% {left:450px; top:200px; width: 300px; height: 300px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg);}
}

 @keyframes myfirs4{
0%   {left:10px; top:5px; width: 5px; height: 20px;  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
10% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}
20% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate-2(0deg);}
30% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}
40% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate-2(0deg);}
50% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}
60% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate-2(0deg);}
70% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}
80% { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate-2(0deg);}
100% {left:450px; top:200px; width: 300px; height: 300px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg);}
}

What does that all mean?

In short the image goes through a transition from the top left of the page (where it is only a few pixels wide and high) to the middle of the page where it is full-size. Every 10% of the full transition there is a rotation of 20 degrees either side – giving it the swinging effect. Pretty cool!

The animation is set to run over 20 seconds and only to run once (-webkit-animation-iteration-count:1;). Since we want the parachute to stay in the end position I added this (-webkit-animation-fill-mode: forwards;).

Whilst this is only a quick demo with CSS3 animations you can immediately see the opportunities for strong CTA’s and attention grabbing special offers for your website. All we need now is for all browsers and devices to be able to handle it! Almost there…

The post CSS3 Animations – Part 3 appeared first on Liquid Web Design Company London.