animation - HTML CSS CSS Property

HTML CSS examples for CSS Property:animation

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. animation

Description

The animation CSS property is a shorthand property:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state.

The following table summarizes the animation Property.

Item Value
Default value: none 0 ease 0 1 normal none running; See individual properties
Applies to:All elements, ::before and ::after pseudo-elements
Inherited: No
Animatable:No.

Syntax

The syntax of the property is as follows: 

animation:      [ name duration timing-function delay iteration-count direction fill-mode play-state ] | initial | inherit

Property Values

The following table describes the values of this property.

ValueDescription
animation-nameSet the name of @keyframes.
animation-durationSet how many seconds or milliseconds to complete one cycle of the animation.
animation-timing-function Set how to progress animation, i.e. the easing functions.
animation-delay   Set a delay before the animation.
animation-iteration-count Set how many times to repeat an animation.
animation-direction   whether to play the animation in reverse on alternate cycles.
animation-fill-mode   how animation should apply styles to its target before and after the animation.
animation-play-state  Set whether the animation is running or paused.
initial   Sets this property to its default value.
inherit   take the value of its parent element animation property.
The example below shows the animation property.

Demo Code




ResultView the demo in separate window 
<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 animation Property</title>
  <style type="text/css">
.box {<!-- w  w  w.  jav  a  2s  . c om-->
    width: 103px;
    height: 130px;
  margin: 50px;
    background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation: moveit 2s linear 0s infinite alternate;
    /* Standard syntax */
    animation: moveit 2s linear 0s infinite alternate;
}

/* 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>
  <div class="box"></div>
 </body>
</html>





Related Tutorials