Css Basic Animation

what is the css animation?
css animations to run a transition from one style configuration. animation itself consists of two components:

1. a style animated depiction of a set of @keyframes that show the beginning of the end of the passage of a style of animation.
2. as a central point for the movement of components. may be running all the time.

benefits and advantages of css animation:

1. They're easy to use for simple animations; you can create them without even having to know JavaScript.
2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they're well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

Configuring the animation

The sub-properties of the animation property are:

1. animation-delay
2. animation-direction
3. animation-duration
4. animation-iteration-count
5. animation-name
6. animation-play-state
7. animation-timing-function
8. animation-fill-mode

for starters I'll give her a simple example:

Note: The examples here use the -moz- prefix on the animation CSS properties for brevity; the live examples you can click to see in your browser also include the -webkit- prefixed versions.

h1 {  
    -moz-animation-duration: 3s;  
    -moz-animation-name: slidein;  
  }  
  
  @-moz-keyframes slidein {  
    from {  
      margin-left: 100%;  
      width: 300%  
    }  
  
    to {  
      margin-left: 0%;  
      width: 100%;  
    }  
  }

View Page Demo

to be more careful about the introduction and other animation techniques please visit the MDN (Mozilla Developer Network)

Mozilla Developer Network

reference :
Info