Principles of CSS3 Animation

bookmarkCSS3access_time4 years ago3 years agopersoncssstarschat_bubble0

What is CSS3 Animation

CSS3 animation is a great new feature. CSS3 animation can be used to really bring a website to life and it can make the website more attractive. CSS animation can bring much-needed interaction to your elements; it can add excitement to the page; and in combination with JavaScript, it can even be an alternative way to animate for games.

In this article, we will take our first steps with CSS3 animation and consider the main guidelines for creating animation with CSS. CSS3 animation now supported in both Firefox and Webkit browsers. Here We’ll to analyse the building up of animation using CSS3.

Because the technology is still relatively new, prefixes for the browser vendors are required. So far, the syntax is exactly the same for each browser, with only a prefix change required. In the code examples below, we use the -webkit syntax.

Here we can see basic example for CSS3 animation. What we need to do to get some CSS3 animation happening is to attach an animation to an element in the CSS.

This will scale the object lengthwise (on the y axis, up and down) to 1.2 times the original size, and then revert to the original size.

We can also use more complex timing for animations. You can use ‘from’ and ‘to’ for basic animations. But you can also specify many actions for your animation using percentages.

50% {
-webkit-transform: translateY(-300px) scaleY(1.2);
}

That covers the squashing. Now we need to move the object using translate. We can combine transforms together.

The translate property allows us to manipulate the object without changing any of its base properties (such as position, width or height), which makes it ideal for CSS animation.

You can use animation-delay to create anticipation or adjusting the animation timing.

div {
-webkit-animation-delay: 1s;
}

The following css properties also we have to consider or we should have knowledge about these, while making CSS3 animation.

-webkit-animation-timing-function property takes the following values:
ease-inSlow at the beginning, and then speeds up.
ease-outFast at the beginning, and then slows to a stop.
ease-in-outStarts slow, speeds up in the middle, and then slows to a stop.
linearMoves at an even speed from start to finish.
You can also use the bezier-curve function to create your own easing speeds.

So, proper understanding of the CSS3 animation properties will help us to make our websites more lively.