W3C home > Mailing lists > Public > www-style@w3.org > March 2010

transitions vs. animations

From: Håkon Wium Lie <howcome@opera.com>
Date: Fri, 19 Mar 2010 11:23:19 +0100
Message-ID: <19363.20632.477.386854@gargle.gargle.HOWL>
To: www-style@w3.org
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

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:

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.


[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 Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Friday, 19 March 2010 10:23:56 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:43 UTC