Mobile Web Wearable Web

CSS Transitions Module Level 3

Transitions allow you to enable implicit transitions, which describe how the CSS properties can be made to change smoothly from one value to another over a given duration. To enhance the rendering performance, you can use hardware acceleration.

When using the CSS transition properties, the Tizen browser requires the -webkit- prefix.

Transition Properties

You can define various properties to control the element transitions:

  • transition-property

    This property defines the element property that is changed during the transition. In the following code snippet, both the width and height of the element change when the mouse hovers over it, but the transition effect is applied to the width property only.

  • transition-duration

    This property defines the duration of the transition. You must define as many instances of the property as you have elements in the transition-property property.

  • transition-timing-function

    This property defines the pace of the transition. The value of the property is defined as a stepping function or a cubic Bézier curve. The ease stepping function equals cubic-bezier(0.25, 0.1, 0.25, 1), and the linear stepping function equals cubic-bezier(0, 0, 1, 1).

  • transition-delay

    This property defines the delay time before the start of the transition.

The following code snippet demonstrates how to use transition properties. For a complete source code, see transition_property.html.

<head>
   <style type="text/css">
      body{font-size: 12px}

      .box 
      {
         -webkit-transition-property: width;
         -webkit-transition-duration: 2s;
         -webkit-transition-timing-function: ease;
         -webkit-transition-delay: 0.5s;
      }

      .box: hover 
      {
         width: 300px;
         height: 200px;
         background: CornflowerBlue;
      }
   </style>
</head>
<body>
   <h1>CSS transitions tutorial</h1>
   <div class="box">
      <p>Mouse over or tap here to animate</p>
      <p>transition-property: width, height, background</p>
   </div>
</body>
Note
The hover pseudo class in Tizen maintains a mouseover state when an element is tapped, and becomes a mouseout state when another element is tapped.

The transition property allows you to define all the transition properties in a shorthand mode in the order of transition-property | transition-duration | transition-timing-function | transition-delay. If you omit a property value, a default value is used instead.

<style type="text/css">
   .box 
   {
      -webkit-transition: width 1s ease 1s;
   }
</style>

The transition property connects movement more naturally than the more generally used the pseudo classes, such as :hover or :active. The smooth effect can be achieved more conveniently and easily with the transition property than with JavaScript or Flash, and the transition property also supports the browser side to provide excellent performance.

Go to top