CSS animation-timing-function

on Mar 24, 2016

CSS animation-timing-function property describes how the animation will progress over one cycle of its duration. e.g. ease, linear, etc. In case animation-name has multiple values, animation-timing-function can also have multiple values.

CSS property animation-timing-function

CSS version:	CSS 3
Value:	single-timing-function [ ‘,’ single-timing-function ]*
single-timing-function:	ease \| linear \| ease-in \| ease-out \| ease-in-out \| step-start \| step-end \| steps([, [ start \| end ] ]?) \| cubic-bezier(, , , )
Initial:	ease
Applies to:	all elements, ::before and ::after pseudo-elements
Inherited:	no

Example – animation-timing-function

In the following code, CSS property animation-timing-function can be changed to the following values

ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end

<style>
@keyframes left-to-right {
  0% {left:0;}
  100% {left:200px;}
}
.box {
  position: fixed;
  background-color:lightgreen;
  animation-name: left-to-right;
  animation-duration: 4s;
  animation-timing-function:ease;
  animation-iteration-count:infinite;
}
</style>

<div class=box>Object</div>

animation-timing-function refresh

try it online