IT. Expert System.

CSS

animation


Property Description

The animation property is a shorthand property that allows setting six of the animation properties at once.

This property has the following syntax:

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

Property Values

Value Description
name Specifies the name of the keyframe you want to bind to the selector
duration Specifies the duration in seconds or milliseconds of the animation
timing-function Specifies the duration in seconds or milliseconds of the animation
delay Specifies a delay before the animation will start
iteration-count Specifies the number of times to play the animation
direction Specifies whether or not the animation should play in reverse on alternate cycles
fill-mode Specifies what values are applied by the animation outside the time it is executing
play-state Specifies whether the animation is running or paused
initial Specifies that the value of the property should be set to the default value
inherit Specifies that the value of the property should be inherited from the parent element

Examples

This example shows an animation moving three different colored boxes from left to right using the animation shortcut:

<style type="text/css">

div.box1
{
  width:50px;
  height:50px;
  background:blue;
  position:relative;
  animation:boxmove 5s ease 0 infinite normal;
  /* Firefox */
  -moz-animation:boxmove 5s ease 0 infinite normal;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s ease 0 infinite normal;
}

div.box2
{
  width:50px;
  height:50px;
  background:red;
  position:relative;
  animation:boxmove 5s ease 2s infinite normal;
  /* Firefox */
  -moz-animation:boxmove 5s ease 2s infinite normal;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s ease 2s infinite normal;
}

div.box3
{
  width:50px;
  height:50px;
  background:green;
  position:relative;
  animation:boxmove 5s ease -2s infinite normal;
  /* Firefox */
  -moz-animation:boxmove 5s ease -2s infinite normal;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s ease -2s infinite normal;
}

@keyframes boxmove
{
  from {left:0px;}
  to {left:210px;}
}

@-moz-keyframes boxmove /* Firefox */
{
  from {left:0px;}
  to {left:210px;}
}

@-webkit-keyframes boxmove /* Safari and Google Chrome */
{
  from {left:0px;}
  to {left:210px;}
}
</style>

<div class="box1"></div>
<br/>
<div class="box2"></div>
<br/>
<div class="box3"></div>

This produces the following result:




Browser Support

Chrome Firefox IE Safari Opera
4.0 -webkit- 16.0
5.0 -moz-
10.0 4.0 -webkit- 12.1
12.0 -o-
15.0 -webkit-

Miscellaneous Information

Inherited: No
Defined In: CSS3
Default Value: none 0s ease 0s 1 normal none running


Content

Android Reference

Java basics

Java Enterprise Edition (EE)

Java Standard Edition (SE)

SQL

HTML

PHP

CSS

Java Script

MYSQL

JQUERY

VBS

REGEX

C

C++

C#

Design patterns

RFC (standard status)

RFC (proposed standard status)

RFC (draft standard status)

RFC (informational status)

RFC (experimental status)

RFC (best current practice status)

RFC (historic status)

RFC (unknown status)

IT dictionary

License.
All information of this service is derived from the free sources and is provided solely in the form of quotations. This service provides information and interfaces solely for the familiarization (not ownership) and under the "as is" condition.
Copyright 2016 © ELTASK.COM. All rights reserved.
Site is optimized for mobile devices.
Downloads: 452 / 158764116. Delta: 0.02094 с