how do I do animation in css?

Anonymous asked 4 years ago

Can you give me a simple example of creating a css animation?

how do I do animation in css? was last modified: June 25th, 2015 by Anonymous

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
0 Answers
Maximus Mccullough Staff answered 4 years ago

The first thing that you have to do is set up a div that you want to animate. You can also target id’s on other tags as well, but for the sake of keeping it simple I am going to set up a div and give it an id. We target keyframes for CSS animation. I will walk you through the process and then have a full working example at the end of this answer.

<div id="animate"></div>

Ok now that I have the div set up I can start to give it some shape. Ill use a circle in CSS for this animation demonstration example in CSS.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂
#animate{
position: relative;
width:100px;
height:100px;
border-radius:100%;
background:yellow;
}

This will give me a yellow circle but within my CSS commands I have to name the animation so I can target with keyframes. I do this by adding this line to the above code. -webkit-animation-name: animatecircle; for Chrome and Safari browsers and animation-name:animatecircle; for the rest of the browsers.

#animate{
position: relative;
width:100px;
height:100px;
border-radius:100%;
background:yellow;
-webkit-animation-name: animatecircle;
animation-name:animatecircle; 
}

Now I can give an animation duration time to the above code to speed up or slow down the animation in CSS. For safari and chrome I will use this command to control the duration -webkit-animation-duration: 4s; and for other browsers I will use this command,  animation-duration: 4s;. Now our CSS code should look like this.

Subscribe To My YouTube Channel:
#animate{
position: relative;
width:100px;
height:100px;
border-radius:100%;
background:yellow;
-webkit-animation-name: animatecircle;
animation-name:animatecircle; 
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}

So now that we have the preliminary code work done for our CSS animation we need to start applying keyframes. We do this in percentages. The percentages target the time frame. Lets take the example 1 to 4 seconds. When the animation is at 1 seconds the animation will display whatever is before the 25% mark, when it is at 2 it will display whatever is before the 50% mark and so on. There is a difference once again between Chrome, Safari and the rest of the browsers. This first code will be for Chrome and Safari. Notice I am also targeting what I named the animation.

@-webkit-keyframes animatecircle {
 0% {background-color:orange; left:0px; top:0px;}
 25% {background-color:yellow; left:200px; top:0px;}
 50% {background-color:pink; left:200px; top:200px;}
 75% {background-color:blue; left:0px; top:200px;}
 100% {background-color:black; left:0px; top:0px;}
} 

The rest of the browsers have a very similar code for CSS animation, we just take off -webkit.

@keyframes animatecircle {
 0% {background-color:orange; left:0px; top:0px;}
 25% {background-color:yellow; left:200px; top:0px;}
 50% {background-color:pink; left:200px; top:200px;}
 75% {background-color:blue; left:0px; top:200px;}
 100% {background-color:black; left:0px; top:0px;}
}

Here is a complete CSS animation example code for you.

<div id="animate"></div>

<style>
#animate{
position: relative;
width:100px;
height:100px;
border-radius:100%;
background:yellow;
-webkit-animation-name: animatecircle;
animation-name:animatecircle; 
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}
@-webkit-keyframes animatecircle {
 0% {background-color:orange; left:0px; top:0px;}
 25% {background-color:yellow; left:200px; top:0px;}
 50% {background-color:pink; left:200px; top:200px;}
 75% {background-color:blue; left:0px; top:200px;}
 100% {background-color:black; left:0px; top:0px;}
} 
@keyframes animatecircle {
 0% {background-color:orange; left:0px; top:0px;}
 25% {background-color:yellow; left:200px; top:0px;}
 50% {background-color:pink; left:200px; top:200px;}
 75% {background-color:blue; left:0px; top:200px;}
 100% {background-color:black; left:0px; top:0px;}
}</style>

If you wanted to add a delay to your animation you would add this CSS code.

animation-delay: 2s;

If you want your CSS animation to repeat a certain amount of times use this code and adjust the number. The code below repeats the animation 3 times.

animation-iteration-count: 3;

If you want the animation to keep playing you would add this CSS code to your animation.

animation-iteration-count: infinite;

If you want to reverse your CSS animation use this code.

animation-direction: reverse;

If you want to alternate the CSS animation use this code.

animation-direction: alternate;

To add more timing functions to your CSS animations you can use these commands. You want to set them to your main div id. In our example we would put these commands in our CSS code after #animate{ in here }

  1. Linear = same speed from start to finish
  2. Ease = slow start then fast then slow at the end
  3. Ease-in = slow start
  4. Ease-out = slow end
  5. Ease-in-out = slow start and end
  6. cubic-bezier(n,n,n,n)= custom time
animation-timing-function: linear;
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;

You can also shorthand your animation code like this code below.

animation: example 5s linear 2s infinite alternate;

🙂

Answer for how do I do animation in css? was last modified: May 28th, 2015 by Maximus Mccullough

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share: