@keyframes Rule - HTML CSS CSS Property

HTML CSS examples for CSS Property:keyframes Rule

Description

The @keyframes CSS rule sets the key steps during an animation.

Syntax

The syntax of this at-rule is as follows:

@keyframes animation-name { 
    keyframes-selector { 
         property: value;
    }
}

Parameters

The following table describes the parameters of this at-rule.

Value Description
animation-name The name of the animation.
keyframes-selector Set the percentage along the duration of the animation.

The example below shows the @keyframes at-rule.

Example

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 @keyframes rule</title>
  <style type="text/css">
    .box {<!--from   www  . j a v a 2  s  .c o m-->
    margin: 50px;
        width:153px;
        height:103px;
        background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat;
        position: relative;
        /* Chrome, Safari, Opera */
        -webkit-animation-name: moveit;
        -webkit-animation-duration: 2s;
        /* Standard syntax */
        animation-name: moveit;
        animation-duration: 2s;
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes moveit {
        from {left: 0;}
        to {left: 50%;}
    }

    /* Standard syntax */
    @keyframes moveit {
        from {left: 0;}
        to {left: 50%;}
    }
</style>
 </head>
 <body>
  <p><strong>Note:</strong> Click the "Show Output" button to repeat the animation.</p>
  <div class="box"></div>
 </body>
</html>

Related Tutorials