transition CSS attribute

H-SMILE core, CSS, the transition attribute.

The transition attribute accepts single value or list of values – functions describing animated transformation of CSS attributes between initial state and the state described by  the rule where the transition is defined. Example:

div
{
  width:100px;
  height:100px;
}
div:hover
{
  width:200px;
  height:200px;
  transition: width(linear,400ms)
              height(linear,400ms);
}

Second rule here defines transition of width and height attributes between normal state to the :hover state of the element. The transition attribute defines both directions of the transition – from normal state to :hover and from :hover state to normal.

Transition definition syntax

Transition definition is a single function or space delimited list of functions where each function is one of:

  1. Cannonic defintion using named parameters:
    attribute ( easing-function:name , duration: duration , delay: duration ) or
    attribute ( easing-function-in:name , duration-in: duration , delay-in: duration,
               easing-function-out:
    name , duration-out: duration , delay-out: duration  )
  2. Declares animation of the attribute in both directions – when element gets and looses the style where transition is defined. When element looses the style engine initiates automatic rollback animation – value of the property is changing in opposite direction as if time is running back. Order of named parameters is not relevant.
  3. attribute ( easing-function , duration [, delay ] )
  4. Declares animation of the attribute in both directions – when element gets and looses the style where transition is defined. When element looses the style engine initiates automatic rollback animation – value of the property is changing in opposite direction as if time is running back.
  5. attribute ( easing-function , duration , delay , rollback-easing-function, [rollback-duration [, rollback-delay ]] )
  6. Declares animation of the attribute in both directions with explicit declaration of the rollback method.
  7. attribute ( easing-function , duration [, delay ], none )
  8. Declares animation of the attribute only in initial-to-this direction suppressing rollback animation. When element looses the style no animation happens – elements gets new style values immediately.
  9. attribute ( none , rollback-easing-function, rollback-duration [, rollback-delay ] )
  10. Declares animation of the attribute only in this-to-initial (rollback) direction suppressing direct animation. When element gets the style no animation happens – elements gets new style values immediately.
  11. sound ( in: url(sound1.wav) [,out: url(sound2.wav)] )
  12. Defines sounds to be played during in and out transitions.

Where:

  • attribute – name of animatable CSS attribute, e.g. function width(linear,0.4s) defines rule of the transition of the width attribute;
  • easing-function – name of one of easing functions listed in easing-functions.htm file;
  • duration – animation duration, number of seconds or milliseconds, e.g. 0.4s and 400ms;  
  • delay – delay before start of animaton of the property.

Transition triggering

When element changes its state (e.g. :hover or value of some attribute changes) it may have new style applied to it (if such style is defined at all). It is said that the element has two style bags at the moment of change: p-style – previous style and n-style – new style that is about to be applied. If one or both styles have transition property defined then following actions are taken:

  • p-style.transition – null,  n-style.transition – defined :
    Direct transition initiated, n-style.transition definition is used.
  • p-style.transition – defined,  n-style.transition – null :
    Rollback transition initiated, p-style.transition definition is used.
  • p-style.transition – defined,  n-style.transition – defined and transitions are not the same – transition is explicitly defined by the new rule:
    Direct transition initiated, n-style.transition definition is used.

Transition interruption

If the element gets new value of the transition style attribute while transition is running then the transition switches direction by using rules above. The only difference is that overall duration of the transition will be equal to current time of the transition. E.g. rollback of not-finished transition will take shorter time than full rollback. In the same way reaplying of some transition that is rolling back at the moment will be shorter than full direct transition.