CSS3 Animations

So today we’re going to take a second lesson in CSS3 and learn how to animate some stuff on the screen. Why? 1) Because we can 2) Because is you want to be a rockstar designer one day people will ask you to do some animations and 3) right now CSS3 is the best thing around for it.

So let’s begin. This may not work in IE but who cares? We’re too cool for that junk right? Anybody who uses IE deserves to have a pitiful online experience in my opinion.

Ok, so we’re going to be using the @keyframes rule:

Here’s the Animation

Here’s the HTML

Basically it’s a div with an id called “blockmotion”. We have placed an image inside. The image is a png with the background colour to alpha making it transparent.

<div id="blockmotion"><img alt="design is our job alpha" style=";height:auto;;position:inherit !important;" indx="57982382" rank="3" irank="619692347" atitle="CSS3 Animations" data-src="//liquid.gallery/wp-content/uploads/2014/04/design-is-our-job-alpha.png" data-srcset="" class="rs-article-img-src do-lazy"></div>

Here’s the CSS3

Simply drop this in your CCS file hit save and there you have it. Job done!

#blockmotion {
background:#479ccf;
width:200px;
height:200px;
border-radius: 50px;
position:relative;
-webkit-animation-name:myfirst;
-webkit-animation-duration:10s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
animation-name:myfirst;
animation-duration:10s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}

 @-webkit-keyframes myfirst{
0%   {background:#479ccf; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:#479ccf; left:200px; top:200px;}
75%  {background:yellow; left:0px; top:200px;}
100% {background:#479ccf; left:0px; top:0px;}
}


@keyframes myfirst
  {
0%   {background:#479ccf; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:#479ccf; left:200px; top:200px;}
75%  {background:yellow; left:0px; top:200px;}
100% {background:#479ccf; left:0px; top:0px;}
}

Most of the CSS is self-explanatory when you look at it. If it’s not then look at it some more. I’m not going to spend an hour explaining it. Just copy the code and play around. That’s the best way to learn. You’ll soon understand how much fun you can have with this!

You can nest animations so that one is inside another and combine all sorts of other effects which we’ll move onto in later lessons.

This is just 15 minutes of fun…

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