Categories
CSS Web development

CSS animation-timing-function Property

CSS animation-timing-function Property

The CSS animation-timing-function property defines the speed curve of an animation.

Demo:

linear
ease
ease-in
ease-out
ease-in-out
steps

The speed curve specifies the time an animation uses to change from one set of CSS styles to another (the speed curve is used to make the changes smoothly).

Syntax:

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n);

linear – the animation has the same speed from start to end.

ease (default) – the animation has a slow start, then fast, before it ends slowly.

ease-in – the animation has a slow start.

ease-out – the animation has a slow end.

ease-in-out – the animation has both a slow start and a slow end.

step-start – equivalent to steps(1, start).

step-end – equivalent to steps(1, end).

steps (int, start | end) – define a stepping function, with two parameters. The first parameter defines the number of intervals in the function. The second parameter (optional), is either the value “start” or “end”, and defines the point at which the change of values occur within the interval.

cubic-bezier – specify your own values in the cubic-bezier function
(numeric values from 0 to 1).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  position: relative;
  animation: move 5s infinite;
  animation-timing-function: linear;
}

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:

Play an animation with the same speed from beginning to end:


Enjoy coding!