IT. Expert System.

CSS

animation-timing-function


Property Description

The animation-timing-function property specifies the speed curve of the animation.

The speed curve defines the amount of time an animation uses to change from one set of CSS styles to another.

This property has the following syntax:

animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)|initial|inherit;

Property Values

Value Description
linear Specifies that the animation has the same speed from start to end
ease (default) Specifies that the animation starts slowly, then fast, then ends slowly
ease-in Specifies that the animation starts slowly
ease-out Specifies that the animation ends slowly
ease-in-out Specifies that the animation starts and ends slowly
linear Specifies that animation has the same speed from start to end
cubic-bezier(n,n,n,n) Allows specification of values in the cubic-bezier function. Possible values are numeric values from 0 to 1
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 the pre-defined animation timing functions:

<style type="text/css">

div.animate {
  width:50px;
  height:50px;
  color:white;
  padding:2px;
  background:blue;
  position:relative;
  animation:boxmove 5s infinite;
  /* Firefox */
  -moz-animation:boxmove 5s infinite;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s infinite;
}

#test1 {
  animation-timing-function:linear;
  /* Firefox */
  -moz-animation-timing-function:linear;
  /* Safari and Google Chrome */
  -webkit-animation-timing-function:linear;
}

#test2 {
  animation-timing-function:ease;
  /* Firefox */
  -moz-animation-timing-function:ease;
  /* Safari and Google Chrome */
  -webkit-animation-timing-function:ease;
}

#test3 {
  animation-timing-function:ease-in;
  /* Firefox */
  -moz-animation-timing-function:ease-in;
  /* Safari and Google Chrome */
  -webkit-animation-timing-function:ease-in;
}

#test4 {
  animation-timing-function:ease-out;
  /* Firefox */
  -moz-animation-timing-function:ease-out;
  /* Safari and Google Chrome */
  -webkit-animation-timing-function:ease-out;
}

#test5 {
  animation-timing-function:ease-in-out;
  /* Firefox */
  -moz-animation-timing-function:ease-in-out;
  /* Safari and Google Chrome */
  -webkit-animation-timing-function:ease-in-out;
}

@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 id="test1" class="animate">linear</div>
<br/>
<div id="test2" class="animate">ease</div>
<br/>
<div id="test3" class="animate">ease-in</div>
<br/>
<div id="test4" class="animate">ease-out</div>
<br/>
<div id="test5" class="animate">ease-in-out</div>

This produces the following result:

linear

ease

ease-in

ease-out

ease-in-out

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: ease


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: 179 / 158763843. Delta: 0.00384 с