Tag: animation-timing-function

Web development

CSS animation-timing-function Property

Post author By Lena Stanley
Post date August 11, 2021

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!

CSS cubic-bezier() Function

Post author By Lena Stanley
Post date August 11, 2021

The CSS cubic-bezier() function specifies a Cubic Bezier curve.

A Cubic Bezier curve is specified by four points (P0, P1, P2, P3). P0 and P3 are the starts and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

The cubic-bezier() function you can use with the transition-timing-function property and the animation-timing-function property.

Syntax:

cubic-bezier(x1,y1,x2,y2);

x1,y1,x2,y2 – numeric values (x1 and x2 must be a number from 0 to 1).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.8, 1.0, 0.2);
}

.square:hover {
  width:300px;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

Hover over the div element below, to see the transition effect:

Enjoy coding!

How to use CSS steps() Function ?/ CSS typing effect

Post author By Lena Stanley
Post date August 11, 2021

The CSS steps() define a stepping function, with two parameters.

The first parameter defines the number of intervals in the function. The second parameter, which is optional, is either the value “start” or “end”, and defines the point at which the change of values occur within the interval.

Note: If you do not specify the second parameter, it is given the value “end”.

Example1:

<!DOCTYPE html>
<html>
<head>
<style> 
#square1 {
  width: 100px;
  height: 50px;
  background: #2a9d8f;
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  animation: mymove 5s infinite;
  animation-timing-function: steps(5,end);
}

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

<div id="square1">steps</div>

</body>
</html>

Output:

steps

Example2:

CSS Typing effect:

<!DOCTYPE html>
<html>
<head>
<style> 
body {
  display: flex;
  justify-content:center;
  height: 100vh;
  align-items: center;  
  background-color: #faedcd;
}

.text-container {
  position: relative;
}

.a, .b {
  font-size: 50px;
  font-family: 'Courier New', monospace;
  letter-spacing: 4px;
  position: relative;
  line-height:.2;
}

.a:before, .b:before {
  content:"";
  position: absolute;
  background-color: #faedcd;
  height: 55px;
  top:-14px;
  left:-2px;
}

.a:before {
  width:220px;
  animation: move 2s steps(6,end) forwards 1s;
}


@keyframes move {
  0% {transform: translateX(0);opacity:1;}
  80% {transform: translateX(201px);opacity:1;}
  100% {transform: translateX(201px); opacity:0;}
}

.a:after, .b:after {
  content:"|";
  font-weight: 100;
  left:-5px;
  top:-2px;
  position: absolute;
}

.a:after {
  animation: move 2s steps(6,end) forwards 1s;
}

.b:before {
  width:420px;
  animation: moveTwo 4s steps(12,end) forwards 3.2s;
}

.b:after {
  opacity:0;
  animation: moveTwo 4s steps(12,end) forwards 3.2s, blink .7s ease infinite 6.5s;
}

@keyframes moveTwo {
  0% {transform: translateX(0);opacity:1;}
  80% {transform: translateX(411px);opacity:1;}
  100% {transform: translateX(411px); opacity:1;}
}

@keyframes blink {
  from { opacity: 1; }	
	to { opacity: 0; }
}
</style>
</head>
<body>
    
<div class="text-container">
  <p class="a">HELLO!</p>
  <p class="b">HOW ARE YOU?</p>
</div>

</body>
</html>

Output:

*to see the animation on the website click here.

*for the best animation effect choose the monospace font.

Watch also the video tutorial: