This action will send an HTTP request to the backend, along with all the necessary data, and the backend application will use that data to make changes to the database. After the action is complete, whether successful or not, an HTTP response will be sent back to the frontend, which will act accordingly based on the status of that response.

When these requests and responses are transferred back and forth, they need to follow a certain format so that both ends can understand each other. HTTP was created for this purpose. It is a standard network protocol that enables web applications to understand and communicate with each other.

What Are the HTTP Request Methods?

There are several methods you can use to send an HTTP request, and each of them serves a different purpose, as shown below:

The GET Method

The GET method is used to request data and resources from the server. When you send a GET request, the query parameters are embedded in the URL in name/value pairs like this:

http://example.com/index.html?name1=value1&name2=value2

Note that the question mark (?) denotes the beginning of a list of parameters. Each parameter forms a key/value pair (name=value), and the ampersand (&) is used to divide two different parameters.

The POST Method

The POST method is used to send data to the server, either adding a new resource or updating an existing resource. The parameters are stored in the body of the HTTP request.

POST /index.html HTTP/1.1
Host: example.com
name1=value1&name2=value2

The DELETE Method

This method removes a resource from the server.

The HEAD Method

The HEAD method works just like GET except that the HTTP response sent from the server will only contain the head but not the body. This means that if the server is "OK" with the request, it will give you a 200 OK response but not the resource you requested. You can only retrieve the resource with the GET method.

This is very useful when you are testing whether the server works. Sometimes, the resource may take a long time to be transmitted, and for testing purposes, you only need a 200 OK response to know that everything works properly.

The PUT Method

The PUT method is used to update existing resources, and it is similar to the POST method with one small difference.

When you PUT a resource that already exists, the old resource will be overwritten. And making multiple identical PUT requests will have the same effect as making it once.

When you POST identical resources, that resource will be duplicated every time the request is made.

What is the Fetch API?

For a long time, the JavaScript community lacked a standard way to send HTTP requests. Some people used XMLHttpRequest, aka AJAX, while others prefered external libraries such as Axios or jQuery.

The fetch API was introduced in 2015 as the modern, simplified, and standard way of making HTTP requests using JavaScript. It is natively supported, so there is no need to install any third-party libraries.

How to Send a GET Request Using JavaScript

The fetch API is promise-based, which means that it offers a clean and concise syntax for writing asynchronous operations. For example, this is how you can send a GET request using the fetch API.

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => {
    // If the response is not 2xx, throw an error
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    // If the response is 200 OK, return the response in JSON format.
    return response.json();
  })
  .then((data) => console.log(data)) // You can continue to do something to the response.
  .catch((error) => console.error("Fetch error:", error)); // In case of an error, it will be captured and logged.

You can also include custom options with the request, such as custom headers, authorization tokens, and so on.

fetch("https://jsonplaceholder.typicode.com/users", {
  headers: {
    "Content-Type": "application/json",
    "Authorization": "your-token-here",
  },
  credentials: "same-origin",
})
  .then(. . .);

How to Send a POST Request Using JavaScript

When sending a POST request, things get a bit more complex because you need to send data to the server with the request body. This could get complicated depending on the kind of data you're sending and your specific use case.

For example, the following code sends JSON data to the backend:

fetch("https://jsonplaceholder.typicode.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "John Doe",
    email: "johndoe@example.com",
  }),
});

There are a few things you must pay attention here. First of all, you must explicitly specify the request method. If you leave this out, the default GET method will be used.

Also, the request body only accepts string data, so you must use the stringify() method to convert JSON into a string before assigning it to the request body.

This is also why it is important to include the Content-Type header, which lets whoever is on the receiving end know how to parse the request body.

However, things are usually more complex in practice. For example, when working with web forms, instead of JSON, you are likely using the x-www-form-urlencoded form encoding, in which case the request can be sent like this.

The following example assumes you understand what event handlers are.

document.addEventListener("DOMContentLoaded", function () {
  const form = document.querySelector("form");
  const usernameInput = document.getElementById("username");
  const emailInput = document.getElementById("email");

  const formData = new URLSearchParams();

  usernameInput.addEventListener("input", function () {
    formData.set("username", usernameInput.value);
  });

  emailInput.addEventListener("input", function () {
    formData.set("email", emailInput.value);
  });

  form.addEventListener("submit", async function (event) {
    event.preventDefault(); // Prevent the default form submission action

    await fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      body: formData.toString(),
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    });
  });
});

If you need to upload files to the backend, you'll need the multipart/form-data form encoding instead.

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("myForm");
  const usernameInput = document.getElementById("username");
  const emailInput = document.getElementById("email");
  const pictureInput = document.getElementById("picture");

  const formData = new FormData();

  usernameInput.addEventListener("input", function () {
    formData.set("username", usernameInput.value);
  });

  emailInput.addEventListener("input", function () {
    formData.set("email", emailInput.value);
  });

  pictureInput.addEventListener("change", function () {
    formData.set("picture", pictureInput.files[0]);
  });

  form.addEventListener("submit", async function (event) {
    event.preventDefault(); // Prevent the default form submission

    await fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      body: formData,
    });
  });
});

Note that when using the FormData() to construct the request body, the Content-Type will be locked into multipart/form-data. In this case, it is not necessary to set a custom Content-Type header.

How to Send a PUT Request Using JavaScript

The PUT request works similarly to POST, but you must remember to set method to PUT.

fetch("https://jsonplaceholder.typicode.com/users", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: "123"
    name: "John Doe",
    email: "johndoe@example.com",
  }),
});

Realistically, you'll have to provide an id, or any other key that enables you to locate the record to be updated in the backend.

How to Send a DELETE Request Using JavaScript

The DELETE request works similarly to PUT, but remember to set method to DELETE.

fetch("https://jsonplaceholder.typicode.com/users/123", {
  method: "DELETE",
});

And similarly, remember to provide an id so that the backend application knows which record to delete.

How to Send a Request Using XMLHttpRequest (AJAX)

Besides fetch(), it is also possible to make an HTTP request using XMLHttpRequest. The following example demonstrates how to make a GET request to the endpoint https://jsonplaceholder.typicode.com

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error("Error:", xhr.statusText);
  }
};
xhr.onerror = function () {
  console.error("Request failed");
};
xhr.send();

The syntax is a bit more complex, as XMLHttpRequest relies on callback functions to work with asynchronous operations, which means it is easy to lead to what is known as the callback hell, where you have layers upon layers of callback functions, making your code base difficult to read and maintain.

However, XMLHttpRequest does have some advantages. Due to the fact that XMLHttpRequest is much older compared to fetch(), it is more widely supported. You should consider using XMLHttpRequest when your web app needs to be compatible with older browsers.

How to Send a Request Using External Libraries

Aside from the built-in methods, you can also send HTTP requests using third-party libraries. For instance, this is how you can send a GET request using jQuery:

$.get("https://api.example.com/data", function (data) {
  console.log(data);
}).fail(function (error) {
  console.error("Error:", error);
});

jQuery is one of the most popular JavaScript libraries. It aims to fix the part of JavaScript that is difficult to use, and it has been pretty successful at that.

In recent years, jQuery has lost some popularity as vanilla JavaScript has improved over the years and the problems that used to bother people have been fixed. It is no longer the go-to choice for creating JavaScript applications, especially for newer developers.

Alternatively, you could go with Axios, which is a promise-based HTTP client just like fetch(), and it has been people's favorite for a very long time before fetch() came.

axios
  .get("https://api.example.com/data")
  .then((response) => console.log(response.data))
  .catch((error) => console.error("Axios error:", error));

Axios and fetch() have very similar syntax as they are both promise-based. The main difference between them is that fetch() is built-in, while Axios requires you to install an external library. However, Axios is much more feature-rich, as it comes with request/response interceptors, automatic JSON handling, and built-in timeouts.

Conclusion

We introduced four different ways you could send HTTP requests using JavaScript in this tutorial. It is up to you to decide which is best for your project.

The fetch API is the modern and standard way of making HTTP requests using JavaScript. It has a relatively simple syntax, which makes your project easier to maintain.

XMLHttpRequest is the legacy method of sending HTTP requests. It is generally not recommended for use in new projects, but if your project needs to be compatible with legacy browsers, XMLHttpRequest might still come in handy.

jQuery is an external package that can do a lot of things, including sending HTTP requests. Although the significance of jQuery has been fading in recent years, it is still used in many older projects, and you might encounter it in your work as a JavaScript developer.

Axios is a third-party library used to send HTTP requests. It has a very similar syntax to the fetch API but comes with a lot more advanced features. It is up to you to decide if you need these features. If not, it is generally recommended to use fetch() instead.

To learn more about JavaScript and web development, visit thedevspace.io

This tutorial covers various methods and techniques for manipulating strings using JavaScript, offering you a comprehensive guide on how to work with strings in your JavaScript applications.

How to Extract a Character from a String in JavaScript

Let's start by talking about how to extract a single character from a string. JavaScript offers three different methods for this purpose: charAt(), at(), and charCodeAt().

How to Use charAt(index)

The charAt() method accepts an index, and returns the character at that index.

const str = "Hello World!";

console.log(str.charAt(0));
console.log(str.charAt(8));
console.log(str.charAt(16));

H
r

If the index is out of range, charAt() will return an empty string ("").

How to Use at(index)

The at() method was added to JavaScript with ES2022, and it is very similar to charAt(). You pass it an index, and the method returns the character at that index.

const str = "Hello World!";

console.log(str.at(0));
console.log(str.at(8));
console.log(str.at(16));

H
r
undefined

When the index is out of range, at() will return undefined instead of an empty string.

Another difference is that at() allows for negative indexing, meaning index -1 returns the last character of the string, -2 returns the second last character, and so on.

const str = "Hello World!";

console.log(str.at(-1));
console.log(str.at(-2));

!
d

Before at(), the only way to do this was through the length property.

const str = "Hello World!";

console.log(str.charAt(str.length - 1)); // The last character
console.log(str.charAt(str.length - 2)); // The second last character

!
d

How to Use charCodeAt(index)

The charCodeAt() method returns the UTF-16 code of the character at the specified index.

const str = "Hello World!";

console.log(str.charCodeAt(0));
console.log(str.charCodeAt(4));

72
111

How to Extract a Substring in JavaScript

Besides extracting a single character, JavaScript also allows you to extract a substring using methods substring() and slice().

How to Use substring(start, end)

substring() extracts a substring based on the provided start (inclusive) and end (exclusive) indexes, and returns the substring as a new string.

const str = "JavaScript";

console.log(str.substring(0, 4));

Java

The end index can be left out, in which case the substring will be extracted from start to the end of the string.

const str = "JavaScript";

console.log(str.substring(4));

Script

How to Use slice(start, end)

slice() is very similar to substring(). It also extracts a substring based on the provided start and end indexes, and returns the substring as a new string.

const str = "JavaScript";

console.log(str.slice(0, 4));

Java

The end index can also be omitted.

const str = "JavaScript";

console.log(str.slice(4));

Script

The difference is that slice() accepts negative indexes. For example, the following example extracts the substring from index -10 to -6.

const str = "JavaScript";

console.log(str.slice(-10, -6));

Java

How to Convert a String to Upper or Lower Case in JavaScript

The methods toUpperCase() and toLowerCase() convert the string to upper or lower case.

const str = "JavaScript";

console.log(str.toUpperCase());
console.log(str.toLowerCase());

JAVASCRIPT
javascript

How to Join Two Strings Together in JavaScript

The easiest way to join two strings together is using the + operator:

const str1 = "Hello";
const str2 = "World!";

const str3 = str1 + " " + str2;

console.log(str3);

Hello World!

Alternatively, you can use the concat() method:

const str1 = "Hello";
const str2 = "World!";

const str3 = str1.concat(" ", str2);

console.log(str3);

Hello World!

Or you can use template literals:

const str1 = "Hello";
const str2 = "World!";

const str3 = `${str1} ${str2}`;

console.log(str3);

Hello World!

How to Trim Extra White Spaces from a String in JavaScript

When working with strings that came from external sources, such as parsed from a webpage or received from user input, a common problem you might encounter is the leading and trailing white spaces.

JavaScript offers three different methods that allow you to easily remove the extra white spaces and keep only the useful information.

The trimStart() method removes the leading white spaces, including spaces, tabs, and line breaks. The trimEnd() method removes trailing white spaces, and trim() removes white spaces from both ends.

const str = "  \n\tHello World!\t\n  ";

console.log(str.trimStart());
console.log(str.trimEnd());
console.log(str.trim());

Hello World!


 Hello World!
Hello World!

How to Add Padding to a String in JavaScript

The methods padStart() and padEnd() can be used to pad characters or substrings at the beginning or the end of the original string.

Both methods take two arguments, length and a substring. The substring will be repeated multiple times, until the resulting string reaches the target length.

const str = "123";

console.log(str.padStart(5, "0"));
console.log(str.padEnd(5, "0"));

00123
12300

If the substring is causing the resulting string to exceed the target length, then only a part of that substring will be used.

const str = "123";

console.log(str.padStart(8, "ok"));

okoko123

Notice that the substring "ok" is repeated twice, but for the third time, it causes the resulting string to exceed the length limit, so only "o" is used for the final padding.

How to Repeat a String in JavaScript

repeat() returns a new string, with the specified number of copies of the original string.

const str = "123";

console.log(str.repeat(3));

123123123

How to Split String into an Array in JavaScript

The split() method splits the string based on the given character, and returns the result in an array. This method is most useful when you need to extract information from a URL.

For example, this is how you can extract the slug of a blog post:

const url = "http://www.example.com/blog/example-article";

let arr = url.split("/");
console.log(arr);

let slug = arr[4];
console.log(slug);

[ 'http:', '', 'www.example.com', 'blog', 'example-article' ]
example-article

How to Search in a String in JavaScript

You can also search for a character or substring using JavaScript.

How to Use indexOf() and lastIndexOf()

The indexOf() method returns the index of the first occurrence of the given character.

The lastIndexOf() methods returns the index of the last occurrence of the given character.

const str = "Hello World";

console.log(str.indexOf("l"));
console.log(str.lastIndexOf("l"));

2
9

Both methods will return -1 if a match is not found.

const str = "Hello World";

console.log(str.indexOf("x"));
console.log(str.lastIndexOf("x"));

-1
-1

How to Use includes()

The includes() method tests if the string contains the given character or substring. It returns true if the substring is found, otherwise false will be returned.

const str = "JavaScript";

console.log(str.includes("S"));
console.log(str.includes("Script"));
console.log(str.includes("script"));

true
true
false

How to Use startsWith() and endsWith()

As the names suggest, these two methods test if the given substring is found at the beginning or the end of the string.

const str = "JavaScript";

console.log(str.startsWith("Java"));
console.log(str.endsWith("Java"));

console.log(str.startsWith("Script"));
console.log(str.endsWith("Script"));

true
false
false
true

How to Search in a String using Regex in JavaScript

But what if you need something more powerful? For example, the indexOf() and lastIndexOf() methods only return the first and last occurrences of the substring, but what if you need to search for all of them?

Or what if, instead of a substring, you need to search for a pattern, such as a phone number or a price tag?

This can be achieved by combining the string methods with Regex, which stands for regular expression. It is a programming tool that allows you to describe patterns in a string. Regex has a very cryptic syntax, but can be very useful sometimes.

How to Use search()

The search() method works similarly to indexOf() we just discussed. It also returns the first occurrence of the matched substring or pattern, except that search() allows you to pass a regular expression.

The following example, /(?<=\$)\d\d?\d?\d?/, searches for a price tag in the string, which should start with a dollar sign ($), and be followed by 1 to 4 numeric digits.

const str = "The laptop costs $1500. The tablet costs $1000.";

console.log(str.search("1500"));
console.log(str.search(/(?<=\$)\d\d?\d?\d?/));
console.log(str.search(/(?<=\$)\d\d?\d?\d?/g));

18
18
18

Notice that the global flag (g) has no effect on search(), and it still returns the first occurrence of the match.

How to Use match() and matchAll()

Compared to search(), the match() method returns much more information that you can work with, such as the actual substring that matches the pattern, the index where the match is found, and more.

const str = "The laptop costs $1500. The tablet costs $1000.";

console.log(str.match(/(?<=\$)\d\d?\d?\d?/));
console.log(str.match(/(?<=\$)\d\d?\d?\d?/g));

[
 '1500',
 index: 18,
 input: 'The laptop costs $1500. The tablet costs $1000.',
 groups: undefined
]
[ '1500', '1000' ]

By including a global flag, you can make match() return all matched substrings, instead of just the first one.

There is also a matchAll() method that forces you to use the global flag. Without it, the method will return a TypeError.

matchAll() will return an iterable object, which you can iterate over using a for of loop.

const str = "This laptop costs $1500. The tablet costs $1000.";

const prices = str.matchAll(/(?<=\$)\d\d\d\d/g);

for (let price of prices) {
  console.log(price);
}

[
 '1500',
 index: 19,
 input: 'This laptop costs $1500. The tablet costs $1000.',
 groups: undefined
]
[
 '1000',
 index: 43,
 input: 'This laptop costs $1500. The tablet costs $1000.',
 groups: undefined
]

How to Replace a String Pattern in JavaScript

Lastly, the replace() method allows you to match for a pattern, and then replace the matched substrings with a new string. For example:

const str = "JavaScript javaScript Javascript";

console.log(str.replace(/JAVASCRIPT/i, "javascript"));
console.log(str.replace(/JAVASCRIPT/gi, "javascript"));

javascript javaScript Javascript
javascript javascript javascript

By default, replace() only matches and replaces the first occurrence of the pattern, but with the global flag, you can replace all matched patterns.

Conclusion

In this tutorial, we explored various methods you can use to work with strings in JavaScript. We also covered how to use regular expressions to match for string patterns.

As a brief summary, here are the methods we discussed in this tutorial:

• charAt(index): Extracts the character at the specified index from a string.
• at(index): Retrieves the character at the specified index, supports negative indexing.
• charCodeAt(index): Returns the UTF-16 code of the character at the specified index.
• substring(start, end): Extracts a part of the string between the start (inclusive) and end indexes (exclusive).
• slice(start, end): Similar to substring(), extracts a part of the string between start (inclusive) and end indexes (exclusive), but supports negative indexing.
• toUpperCase(): Converts all letters in the string to uppercase.
• toLowerCase(): Converts all letters in the string to lowercase.
• concat(): Joins two or more strings together.
• trimStart(): Removes whitespace from the beginning of a string. Including spaces, tabs, and newlines.
• trimEnd(): Removes whitespace from the end of a string.
• trim(): Removes whitespace from both ends of a string.
• padStart(length, substring): Pads the start of a string with another string (multiple times, if needed) until the resulting string reaches the given length.
• padEnd(length, substring): Pads the end of the string with another string (multiple times, if needed) until the resulting string reaches the given length.
• repeat(count): Returns a new string which contains the specified number of copies of the original string.
• split(separator): Splits the string into an array of substrings, using the specified separator to determine where to make the split.
• indexOf(searchValue): Returns the index of the first occurrence of the specified substring. Returns -1 if not found.
• lastIndexOf(searchValue): Returns the index of the last occurrence of the specified substring. Returns -1 if not found.
• includes(searchValue): Determines whether the string contains the specified substring, returning true or false.
• startsWith(searchValue): Checks if the string begins with the specified substring.
• endsWith(searchValue): Checks if the string ends with the specified substring.
• search(regexp): Search for a string pattern, which could be defined by a Regex. Returns the index of the first occurrence of the match or -1 if not found.
• match(regexp): Search for a string pattern, which is defined by a Regex. If a global flag is included, it will return all occurrences of the pattern.
• matchAll(regexp): Returns an iterable object containing all results matching a string against a global regular expression.
• replace(regexp, newSubstr): Replaces occurrences of a pattern (specified by a regular expression) with a new substring.

If you want to learn more about JavaScript and web development, check out my new course at TheDevSpace.io.

In this article, we will discuss how to create cool custom animations using CSS.

Prerequisites

Before going forward with this article, make sure you have basic knowledge of HTML and CSS.

I'll assume you are familiar with CSS selectors, defining element size and color, positioning elements, adjusting opacity, and transforming elements.

How to Create Your First CSS Animation

Let's start by preparing an HTML element.

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

.square {
  width: 100px;
  height: 100px;
  background-color: purple;

  /* Center the element */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Lines 7 to 10 demonstrate a commonly used method to center an element using CSS. Here's the result of the above code:

Centered square

Before we start crafting the animation, you must first think about what kind of effect you wish to achieve.

For example, for this tutorial, I want to create a bouncing effect for the square. This means I need to create an animation based on the top property so that the square can move up and down.

@keyframes bounce {
  0% {
    top: 90%;
  }
  100% {
    top: 10%;
  }
}

To define an animation, you need to use the @keyframes rule, which allows you to define keyframes in the animation process.

The keyframes are set with percentage values, starting from 0% and finishing with 100%. For instance, in our example, the animation will start from top: 90%;, and end with top: 10%;, and after that, it will reset back to 50%.

And, of course, you need to tie the bounce animation with the square (animation-name) and also tell the browser how long you want this animation to last (animation-duration). Here's how you do that:

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
}

A square moving up

How to Add Multiple Keyframes

But as you can see, the square starts from the bottom, moves to the top, and then resets back to the center. That is not exactly a bouncing effect. So, how can we make the square move back down?

To do that, you can set up a third keyframe like this:

@keyframes bounce {
  0% {
    top: 90%;
  }
  50% {
    top: 10%;
  }
  100% {
    top: 90%;
  }
}

This way, the square will start from the bottom (top: 90%;), move to the top (top: 10%;), and then move back down (top: 90%;).

The square moving up and then back down

How to Create a Repeat Animation

There is one problem that still needs to be solved. The animation only plays once. In practice, you might want your animation to repeat several times to create the effect that the square is actually bouncing.

Instead of creating more keyframes, which is not easy, you can define an animation-iteration-count property and specify the number of times you want the animation to repeat.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: 5;
}

The square moving up and down for five times

And if you want the animation to last indefinitely, simply specify infinite.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

How to Use a Timing Function for Smoother Animation

Finally, the bouncing effect started working, but there is still room for improvement. The movement of the square seems a bit unnatural. The bouncing effect would look better if you could smooth out the movement.

This can be achieved with a timing function. By default, the browser will assume a linear timing function, which means the animation will have constant speed from start to end. But you can change that using the animation-timing-function property, like this:

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

By specifying ease-in-out, you are telling the browser to start the animation slowly and also end it gradually. As a result, the entire animation will look a lot smoother.

ease-in-out making the square move smoothly

The Cubic Bezier curve

The value ease-in-out actually represents a mathematical equation called Cubic Bezier. I will spare you the complex mathematical definitions, and you only need to know that the function defines a curve with four control points.

cubic-bezier.com is an online tool that allows you to customize the curve by simply dragging the control points.

A Cubic Bezier curve

The points control the shape of the curve, and the slope of the curve then controls the speed of the animation. For example, the above graph indicates the animation will start slowly, accelerate, and then end smoothly.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.17, 0.67, 0.8, 0.36);
}

In most cases, you don't have to define a customized Cubic Bezier curve. There are several predefined curves that should be enough for most use cases.

ease represents the curve cubic-bezier(0.25, 0.1, 0.25, 1). The animation will start by slowly accelerating and then decelerate to stop.

Cubic Bezier curve for ease

ease-in represents the curve cubic-bezier(0.42, 0, 1, 1). The animation will start smoothly and then stop rather abruptly.

Cubic Bezier curve for ease-in

ease-out represents the curve cubic-bezier(0, 0, 0.58, 1). The animation will start abruptly and then slow down to stop smoothly.

Cubic Bezier curve for ease-out

ease-in-out represents the curve cubic-bezier(0.42, 0, 0.58, 1). The animation will be smooth on both ends.

Cubic Bezier curve for ease-in-out

The steps() function

Besides the smooth curve, you can also specify a stepping function. The function steps() takes two arguments. The first one specifies the number of steps, and the second one sets the point at which the change occurs within the step, either start or end.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(5, start);
}

In this case, the animation will be divided into five steps, and for each step, the change will happen at the beginning of the step.

A demo for the steps function

There are also two shortcuts available for the steps() function. step-start corresponds to steps(1, start), and step-end corresponds to steps(1, end).

How to Combine Multiple Animations

So far, we've covered all the fundamentals you should understand to create CSS animations. And now, it is time to get more creative.

Our previous examples all focused on changing the top property in order to create the bounce effect. You can, in fact, combine multiple properties in one animation. For example, you can create a pulse effect by changing the element's shape and opacity together.

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.ball {
  width: 100px;
  height: 100px;
  background-color: purple;
  border-radius: 50%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  animation: pulse 2s ease-in-out infinite;
}

Also note that the animation properties can be combined into a shortcut, animation.

The pulse effect animation

Other Animation-Related Properties

Besides the animation properties we have discussed so far, there are some miscellaneous properties we should talk about. They can also be useful sometimes.

First of all, there is the animation-direction property, which defines how the animation will be played. The property accepts four different values:

• normal: The animation is played forward.
• reverse: The animation is played backward.
• alternate: The animation is played forward first, then backward. It only works when animation-iteration-count is more than 1.
• alternate-reverse: The animation is played backward first, then forward.

By default, the animation will start playing immediately after the page is loaded. But you can change that with the animation-delay property, which specifies how long you wish to wait before the animation starts.

Lastly, the animation-fill-mode property determines how the element will be displayed before and after the animation is played. By default, the element will not retain any styles from the animation. After the animation stops, the element will reset to normal.

When animation-fill-mode is set to forwards, the element will retain the styles from the last keyframe of the animation after the animation is played.

When set to backwards, the element will take on the styles from the first keyframe of the animation as soon as the animation is played.

When set to both, the element will retain the styles from the first keyframe before the animation starts (behaves like backwards), and it will also retain the styles from the last keyframe after the animation is finished (like forwards).

Conclusion

This tutorial covered everything you need to know to start creating CSS animations using the @keyframes rule.

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

We also went over several animation-related CSS properties:

• animation-duration: Defines how long the animation will last.
• animation-iteration-count: Defines how many times the animation will repeat.
• animation-timing-function: Specifies the timing function, which controls the speed at which the animation is played.
• animation-direction: The direction in which the animation is played.
• animation-delay: The delay before the animation begins.
• animation-fill-mode: Whether or not to retain styles from the animation after it is finished.

For further readings on HTML and CSS, check out this course series -> HTML & CSS: A Practical Guide.