CSS3 transition and animation simple to understand

Explain very good article:
CSS3 of deformation (transform), transition (transtion), animation (animation)

transition

The CSS transition allows css attribute value smoothly transitions within a certain time interval. This effect can be a mouse click, focus, or by clicking on any element in triggering change, and smoothly animated CSS effects of changes in property values.
This transition process is often a switch from state to state b, it often takes a similar move the mouse, click to trigger events such as switching states, triggering the transition.
transition: property || duration || time- function || delay

• property: Not all CSS property transition effects can be achieved.
• duration: the unit can be s can also be a ms.
• timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier
• cubic-bezier (x1, y1, x2, y2), the value should be between [0,1];
• delay: the decision to change the element attribute value How long after the beginning of the implementation of transition effects.

A chestnut:

<style>
      div{
            margin: 100px;
            text-align: center;
            width:100px;
            height:100px;
            background: #00f;
            -webkit-transition: all 1s ease .1s;
            -moz-transition: all 1s ease .1s;
            -o-transition: all 1s ease .1s;
            transition: all 1s ease .1s;
        }
        div:hover{
            background: #f00;
            transform: translateX(100px) rotate(45deg);
        }   
</style>

result:

transition.gif

You can see the color transition and transform the transition is completed at the same time and, if you want to stagger multiple transitions, the transition can take advantage of the delay property.

animation

transition can be considered as switching between two states, but it is for the animation, there will be many intermediate states, so we introduced "keyframes" keyframe following syntax:

@keyframes "name"{
    from{
      //css rules
    }
    percentage{
      //css rules
    }
    to{
     //css rules
    }
}

Then we define several property animation in a CSS style you want to apply the animation elements in:

• animation-name: keyframes defined name,
• animation-duration，
• animation-timing-function: consistent with the transition of the six options
• animation-delay，
• animation-iteration-count: Animation repetitions
• animation-direction: normal | alternative
• animation-play-state: running | paused
  at the end of the animation, CSS style elements will return to the default style, animation-defined CSS styles will be cleared.

A chestnut

        <style>
            @keyframes move {
                from{
                    margin-left: 100px;
                    background-color:pink;
                }
                20% {
                    margin-left: 150px;
                    background: red;
                }
                40% {
                    margin-left: 200px;
                    background-color:purple;
                }
                60% {
                    margin-left: 150px;
                    background-color: red;
                }
                to {
                    margin-left:100px;
                    background-color: pink;
                }
            }
            div{
                width: 100px;
                height: 100px;
                margin-left: 100px;
                text-align: center;
                background:pink;
                animation: move 5s linear;
            }           
        </style>

result:

animation.gif

Nested animation

Nested animation can solve two problems:

1. Public drawn animation
2. Avoid covering conflicts animation