transitions vs. animations

Opera 10.50 supports transitions [1] and transforms [2]. That's
good news. The bad news is that my head aches -- the two names are too
similar in my head. 

Looking at some simple examples, I wonder if it's possible to fold
transitions into animations [3] and thereby get rid of the word
"transitions".

For example, consider this example which describes one transition and
one animation:

  /* code for transitions */

  .transition:hover {
    transition-duration: 0.5s;
    transform: rotate(20deg);
  }

  /* code for animations*/  

  .animation:hover { 
    animation-name: pulse; 
    animation-duration: 0.5s; 
  }

  @keyframes pulse {
    from {
      transform: rotate(0deg);
    }
    to { 
      transform: rotate(-20deg);
    }
  }

The example can be tested out in a webkit-based browser here:
  
  http://people.opera.com/howcome/2010/tests/ani.html

The transition and the animation effects described in this example are
very similar. It seems possible to consider transitions as a subset of
animations and that names therefore can be reused. For example, we
could use 'animation-duration' instead of 'transition-duration' in the
example above.

No?

[1] http://dev.w3.org/csswg/css3-transitions/
[2] http://www.w3.org/TR/css3-2d-transforms/
[3] http://www.w3.org/TR/css3-animations/

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Friday, 19 March 2010 10:23:56 UTC