The human brain is paying lot of attention to moving objects from the
past many years when it comes to designing the website. CSS
transitions and animations comes into phase when you are done with
the HTML page and basics of CSS. As the CSS has been evolved as a
language, animations and graphics has become easier to design for the
website. The file size of few line's code is measured in bytes
whereas the file containing a moving animation requires an additional
request to the server and having size in megabytes. Animation refers
to as “changes over time”. Things that we can change are known as
CSS transforms. If one is not aware with the CSS transitions let me
give the example. Suppose if you are moving your cursor of the mouse
over the button and color changes immediately then mouse out from the
button and color reverts back instantly, this is where CSS
transitions come in.
CSS
Animations:-
With the help of CSS Transitions you can easily create CSS
Animations. These transitions can animate only between start state
and the end state, and the state is handled by CSS property values.
Although CSS transition offers a simple way to animate but requires
little control over the animations. Lets just understand the
animations with the picture shown below:
Animation occurs as the animation property is applied. You need to
apply the start state, intermediate state and end state, the
transitions changes implicitly. It depends on you that for how much
time you want the animation to be there and what timing function to
be used between keyframes. You have the option to set the delay and
direction as well between the transitions.
All the things you could change while working with the transitions,
you can change same while working with animations. Browser support
for CSS animation is always good for all modern browsers. Animation
can start in two different ways and the are as follow:
1) On page load
2) In reaction to change of CSS property
2) In reaction to change of CSS property
CSS Animation Properties:
For controlling an animation there exists eight different properties and they are:-
(1) animation – name property
(2) animation – duration property
(3) animation – timing – function property
(4) animation – iteration – count property
(5) animation – direction property
(6) animation – play – state property
(7) animation – delay property
(8) animation – fill – mode property
(1) animation – name property
(2) animation – duration property
(3) animation – timing – function property
(4) animation – iteration – count property
(5) animation – direction property
(6) animation – play – state property
(7) animation – delay property
(8) animation – fill – mode property
Choosing Animation or Transitions?
If you want to create a simple animation between two states, keep your code simpler and lighter or use javascript in animation then transition is probable best choice for you but if want more animations and animation requires loops and delays then you should proceed with CSS animations.
In general we can say that is you want simple animation then go with the CSS transition and if you want some complex animations then proceed with CSS animations. But if you are thinking about the performance difference then there is hardly any difference between the performance of both.
