Mobile Web Wearable Web

CSS Animations Module Level 3

Animations (like transitions) change the presentational value of the CSS properties over time. The principal difference between animations and transitions is that while transitions are triggered implicitly when property values change, animations are explicitly executed when the animation properties are applied. This means that for animations, you must use animation keyframes to define explicit values for the properties being animated.

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

Keyframes

The CSS animations work based on @-webkit-keyframes rules defined for specific elements. The rules can define various property changes complementing the simple running of a transition.

If the animation only has one set of changes over its whole iteration, the rule values can be assigned with a from {} to {} rule, where from is the beginning of the animation at 0% and to is the end at 100%. If there are multiple changes required, you can define their exact time periods using multiple <number>% {} rules that together cover the entire animation iteration from 0% to 100%.

The following code snippet demonstrates how to use keyframes. For a complete source code, see animation_keyframes.html

<style type="text/css">

   @-webkit-keyframes boxani 
   {
      from {left: 0; top: 0;}
      to {left: 100px; top: 100px;}
   }
   @-webkit-keyframes boxani_case01 
   {
      0% {left: 0; top: 0;}
      25% {left: 100px; top: 0;}
      50% {left: 100px; top: 100px;}
      75% {left: 0; top: 100px;}
      100% {left: 0; top: 0;}
   }

</style>

Animation Properties

You can define various properties for an animation to control how it is played:

  • animation-name

    This property uses the name defined in the @-webkit-keyframes rules to play the animation.

  • animation-duration

    This property defines how long one iteration of the animation takes.

  • animation-iteration-count

    This property defines how many times the animation is repeated. If the value is set as infinite, the repetitions are unlimited.

  • animation-timing-function

    This property defines the pace of the animation.

  • animation-direction

    This property defines the replay direction. The reverse value plays the animation from 100% keyframe to 0% keyframe, while the alternate value plays the animation normally during odd iterations, and from 100% keyframe to 0% keyframe during even iterations.

  • animation-play-state

    This property defines the replay status of the animation. The paused value temporarily stops the animation.

  • animation-delay

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

  • animation-fill-mode

    This property defines the state of the animation before or after the animation is played. The forwards value maintains the last value of the keyframe rule when the animation is over, while the backwards value fills up the first value of the keyframe rule when the animation with the animation-delay property is in a standby state. The both value covers both the start and the end of the animation.

The following code snippet demonstrates how to use animation properties. For a complete source code, see:

<head>
   <style type="text/css">
      .box 
      {
         -webkit-animation-name: boxani;
         -webkit-animation-duration: 5s;
         -webkit-animation-iteration-count: infinite;
         -webkit-animation-timing-function: linear;
         -webkit-animation-direction: normal;
         -webkit-animation-delay: 1s;
         -webkit-animation-fill-mode: none;
      }

      .box.case01: hover 
      {
         -webkit-animation-play-state: paused;
         -webkit-animation-fill-mode: forwards;
      }
   </style>
</head>

<body>
   <h1>animation-name</h1>
   <div class="boxarea">
      <div class="box">
         <p>animate</p>
         <p>animation-name: boxani;</p>
      </div>
   </div>
   <div class="boxarea">
      <div class="box case01">
         <p>animate</p>
         <p>animation-name: boxani_case01;</p>
      </div>
   </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 animation property allows you to define all the animation properties in a shorthand mode in the order of animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-fill-mode. If you omit a property value, a default value is used instead.

<style type="text/css">
   .box 
   {
      width: 150px; height: 100px; background: Coral; position: relative;
      -webkit-animation: boxani 3s ease 1s infinite alternate backwards;
   }
</style>
Go to top