Use cases for CSS transitions and CSS animations

As far as I understand, there is no such thing we can implement using css transitions, but we can not to implement using css animations, but not vice versa.

That is, any transition has a css animation equivalent. For example, this one

.ablock:hover {                                                   
  position: relative;                                             
  -moz-transition-property: background-color, color;              
  -moz-transition-duration: 1s;                                   
  -webkit-transition-property: background-color, color;           
  -webkit-transition-duration: 1s;                                                             
  color: red;                                                     
  background-color:pink;                                          
}

is an equivalent of following:

.ablock:hover {
    -moz-animation-duration:1s;                                   
    -moz-animation-name:transition;                               
    -webkit-animation-duration:1s;                                
    -webkit-animation-name:transition;                            
}       

@-moz-keyframes transition {                                      
    to {                                                          
        color: red;                                 开发者_如何学JAVA              
        background-color: pink;                                   
    }
}       

@-webkit-keyframes transition {                                   
    to {                                                          
        color: red;                                               
        background-color: pink;                                   
    }
}

My question is - if we a talking about browser supporting both css transitions and animations, what are use cases for choosing one or another approach? As for transitions, I can name only one - they have more succinct syntax, we don't have to copy paste huge chucks of code for @-moz-keyframes, @-webkit-keyframes and so on.

As for control from javascript, flexibility and complexity animations are much more appropriate tool (at least, at first glance). So, what are use cases?

UPD: OK, let me try to list interesting info found in questions.

• This one is contributed by Roman Komarov. Say, we have a div and child div. While parent div is hovered, we are transitioning the child element. Once we are taking away the mouse, transition is cancelled. Duration of this cancellation is exactly the time we've already spend for transitioning. Animation is cancelled "immediately". I don't know, nevertheless, how standard are those two behaviours.

---

• Animations can be looped (and there can be keyframes, yeeah).
• Transitions can be more flexible and you can easily make transitions to different values and in different circumstances.

While you can emulate some transitions by animations (like you mentioned in your post), the transitions are just more powerful:

• You just tell which properties you must animate and in which conditions (using the different selectors)
• You can trigger the transition in different ways:
  1. Changing properties in CSS for pseudo-classed :hover, :active etc. (Creating pure CSS UI)
  2. Changing properties in different classes for different purposes.
  3. Changing properties in inline styles: in conjunction with JS it's just more powerful than animations.

---

With transitions you are able to transition between any value of the defined property, which you want to be transitioned. As an example, you want to transition the color of a link, when it's hovered and active:

a {
    color: #000;
    transition: color .4s ease;
}
a:hover {
    color: #888;
}
a:active {
    color: #faa;
}

You are independent, which color you choose. Now if you want to use the animation style, you have to explicitly set the color value for the animation states. And you are not able to easily animate between the three states: normal, hover and active. You need more complex definitions. I'll try this one with animations:

a {
    color: #000;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toDefault;
}
a:hover {
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toHover;
}
a:active {
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toActive;
}
@keyframes toDefault {
    to {
        color: #000;
    }
}
@keyframes toHover {
    to {
        color: #888;
    }
}
@keyframes toActive {
    to {
        color: #faa;
    }
}

Now this does not include the animation back to the state before. I'm not sure if you can even fetch that.

So in short: with transitions you are able to animate an undefined set of properties and values, whilst keyframe animations are used for well defined animations and/or transitions.