DEV Community: Raghul

JavaScript Array Iteration Methods

Raghul — Mon, 20 Jul 2026 16:16:35 +0000

JavaScript Array Iteration Methods

JavaScript Array iteration methods perform some operation on each element of an array. Array iteration means accessing each element of an array. JavaScript provides mainly 3 simple statements for looping over each array items.

for ... of (loops over entries)
for ... in (loops over indexes)
forEach (myFunction)

1.The for...of Loop
The for...of statements hands you the array values.

// Create an Array
const cars = ['BMW', 'Volvo', 'Mini'];

// Iterate over the Array values
let text = "";
for (let x of cars) {
  text += x + ",";
}

2.The for...in Loop
The for...in statements hands you the array indexes. To make it return the elements you must use [x]. for...in was created to inspect Object properties (like: name, age, height), not Arrays.

// Create an Array
const cars = ['BMW', 'Volvo', 'Mini'];

// Iterate over the Array values
let text = "";
for (let x in cars) {
  text += x + ",";
}

// Create an Array
const cars = ['BMW', 'Volvo', 'Mini'];

// Iterate over the Array values
let text = "";
for (let cars[x] in cars) {
  text += x + ",";
}

3.JavaScript Array forEach()
The forEach() method calls a function (a callback function) for each array element. The provided function is user-defined, it can perform any kind of operation on an array.
Syntax:

array.forEach(function callback(value, index, array) {
} [ThisArgument]);

Parameters: This function accepts three parameters as mentioned above and described

value: This is the current value being processed by the
index: The item index is the index of the current element which was being processed by the
array: The array on which the .forEach() method was called.

let emptytxt = "";
let  Arr = [23, 212, 9, 628, 22314];

function itrtFunction(value, index, array) {
    console.log(value);
}

Arr.forEach(itrtFunction);
//output 
23
212
9
628
22314 //

4.JavaScript Array map()
The array.map() method creates an array by calling a specific function on each item in the parent array and it does not change the value or element of the array. It does not execute the function for array elements without values.
Syntax:

array.map(function(value, index, array){
}[ThisArgument]);

Parameters: This method accepts three parameters as mentioned above and described

value: This is the current value being processed by the
index: The item index is the index of the current element which was being processed by the
array: The array on which the .map() function was called.

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

Array Methods in JavaScript

Raghul — Thu, 16 Jul 2026 15:41:50 +0000

Array Methods in JavaScript

To help you perform common tasks efficiently, JavaScript provides a wide variety of array methods. These methods allow you to add, remove, find, and transform array elements with ease.v

1. JavaScript Array length
The length property of an array returns the number of elements in the array. It automatically updates as elements are added or removed. The length property can also be used to set the length of an array.

let a = ["HTML", "CSS", "JS", "React"];
console.log(a.length);

// to set the length of an array
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length = 2;

2. JavaScript Array toString() Method
The toString() method converts the given value into the string with each element separated by commas. Every JavaScript object has a toString() method. The toString() method is used internally by JavaScript when an object needs to be displayed as a text (like in HTML), or when an object needs to be used as a string.

let a  = ["HTML", "CSS", "JS", "React"];
let s = a.toString();
console.log(s);

3. JavaScript Array join() Method
This join() method creates and returns a new string by concatenating all elements of an array. It uses a specified separator between each element in the resulting string. It behaves just like toString(), but in addition you can specify the separator.

let a = ["HTML", "CSS", "JS", "React"];
console.log(a.join('|'));

4.JavaScript Array at()
ES2022 introduced the array method at(). The at() method returns an indexed element from an array. The at() method returns the same as []. Many languages allow negative bracket indexing like [-1] to access elements from the end of an object / array / string. This is not possible in JavaScript, because [] is used for accessing both arrays and objects. obj[-1] refers to the value of key -1, not to the last property of the object. So to solve this the at() method was introduced in ES2022.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(-2);

5.JavaScript Array.pop() Method
The pop() method is used to remove elements from the end of an array. The pop() method returns the value that was "popped out". It changes the orginal array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

6.JavaScript Array push()
The push() method is used to add an element at the end of an Array. As arrays in JavaScript are mutable objects, we can easily add or remove elements from the Array. It changes the orginal array.

let a = [10, 20, 30, 40, 50];
a.push(60);
a.push(70, 80, 90);
console.log(a);

Shifting Elements

Shifting is equivalent to popping, but working on the first element instead of the last.

7.JavaScript Array shift()
The shift() method removes the first array element and "shifts" all other elements to a lower index. It used to remove elements from the beginning of an array. The shift() method returns the value that was "shifted out".

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift(); //[Orange, Apple, Mango]

8.JavaScript Array unshift()
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements. The unshift() method returns the new array length. It used to add elements to the front of an Array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

9.JavaScript Array delete Operator
The delete operator is used to delete the given value which can be an object, array, or anything. Using delete() leaves undefined holes in the array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

To delete object

let emp = { 
    firstName: "Riya", 
    lastName: "Kaur", 
    salary: 40000
} 

console.log(delete emp.salary); 
console.log(emp);

10.JavaScript Array concat() Method
The concat() method is used to concatenate two or more arrays and it gives the merged array. The concat() method creates a new array by merging (concatenating) existing arrays. The concat() method does not change the existing arrays. It always returns a new array. The concat() method can take any number of array arguments. The concat() method can also take strings as arguments:

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

11.JavaScript Array copyWithin()
The copyWithin() method copies array elements to another position in an array. The copyWithin() method overwrites the existing values. The copyWithin() method does not add items to the array. The copyWithin() method does not change the length of the array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);

12.JavaScript Array flat()
The flat() method creates a new array with sub-array elements concatenated to a specified depth. The flat() method is used to flatten the array i.e. it merges all the given array and reduces all the nesting present in it.

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

13.JavaScript Array splice()
The splice() method can be used to add new items to an array. The splice() method returns an array with the deleted items.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

The first parameter (2) defines the position where new elements should be added (spliced in).
The second parameter (0) defines how many elements should be removed.
The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.

14.JavaScript Array slice()
The slice() method slices out a piece of an array into a new array. The slice() method creates a new array. The slice() method does not remove any elements from the source array.

const a = [1, 2, 3, 4, 5];
const res = a.slice(1, 4);
console.log(res); 
console.log(a)

The slice() method creates a new array by extracting elements from index 1 to 3 (exclusive of 4) from the original array. The original array remains unchanged, and the result is [2, 3, 4].

15.Array.map()
Transforms every element of an array and returns a new array without mutating the original. It creates an array by calling a specific function on each element present in the parent array.

const numbers = [1, 2, 3, 4];
const squares = numbers.map(n => n ** 2);
console.log(squares); // [1, 4, 9, 16]

16.Array.filter()
Returns a new array containing only the elements that match a certain condition. It creates a new array with all elements that pass the test implemented by the provided function.

const words = ['apple', 'banana', 'kiwi', 'pear'];
const longWords = words.filter(word => word.length > 4);
console.log(longWords); // ['apple', 'banana']

Object in JavaScript

Raghul — Mon, 13 Jul 2026 17:05:29 +0000

Object in JavaScript

An object is a dynamic data structure that stores related data as key-value pairs, where each key uniquely identifies its value. The values of properties can be primitives, objects, or functions (known as methods when defined inside an object). Objects are mutable and dynamic properties can be added, modified, or deleted at any time. Objects allow data grouping and encapsulation, making it easier to manage related information and behaviour together.

How to Create an Object in JavaScript

1.Using Object Literal Syntax
This is the most popular way to create an object in JavaScript. In this way, we create a JavaScript object by enclosing it within curly braces {}.

let laptop = {
  brand: "Apple",
  model: "MacBook Air",
  operatingSystem: "MacOS"
};

The above code snippet creates a JavaScript object named laptop using curly braces. Within the curly braces, three properties are mentioned, separated by commas.

2.Using Object Constructor Function
This way uses the Object constructor along with the new keyword.

let laptop = new Object(); // This creates an empty object

// Now we will add properties to the object
laptop.brand = "Alienware";
laptop.model = "m15";
laptop.operatingSystem = "Windows 11 Home";

console.log(laptop);
//→ {brand: "Alienware", model: "m15", operatingSystem: "Windows 11 Home"}

The above code creates an empty object using new Object(). Then, we add three properties to this empty object. The resultant object is identical to the one created using the object literal syntax.

3.Using the Object.create Method
This method is used when we wish to inherit properties from an existing object while creating a new object.

let animal = {
  diet: null,
  saySomething: function(word) { console.log(word); }
};

let cat = Object.create(animal);

console.log(cat.diet);
//→ null

cat.saySomething("Meeow");
//→ Meeow

In the above code snippet, the object cat inherits the properties diet and saySomething() from the object animal while the former object is being created. The object animal acts as the parent object, and cat is the child object. Changing the child property diet’s value does not affect the corresponding property for the parent object.

4.Using Object.assign Method
This method is used when we wish to include properties from multiple other objects into the new object we are creating.

let lesson = {
  lessonName: "Data Structures"
};

let teacher = {
  teacherName: "Himmat Singh"
};

let course = Object.assign({}, lesson, teacher);

console.log(course);
//→ {lessonName: "Data Structures", teacherName: "Himmat Singh"}

In the above example, we create a new object named course and include all properties from two objects — lesson and teacher — into it. The properties from the source objects get copied to the target object {}, resulting in the object variable course.

Functions in JavaScript

Raghul — Thu, 09 Jul 2026 16:27:27 +0000

Functions in JavaScript

Functions are one of the fundamental building blocks designed to perform specific tasks in JavaScript. They allow you to organize, reuse, and modularize code. They can take inputs, perform actions, and return outputs. In functions, parameters are placeholders defined in the function, while arguments are the actual values you pass when calling the function.
Uses of function
1.Code reusability
2.Modularity
3.Readability
4.Maintainaability

function greet(name) {   // 'name' is a parameter
  console.log("Hello " + name);
}

greet("Alice");  // "Alice" is the argument

Return Statement
The return statement is used to send a result back from a function. When return executes, the function stops running at that point. The returned value can be stored in a variable or used directly.

function add(a, b) {
  return a + b; // returns the sum
}

let result = add(5, 10);
console.log(result);

Type of Function
Here are the three main types of functions in JavaScript:

1. Named Function
A function that has its own name when declared. It’s easy to reuse and debug because the name shows up in error messages or stack traces.

function greet() {
  return "Hello!";
}
console.log(greet());

2. Function Expression
A function expression is a function created as part of an expression and assigned to a variable or passed to another function. It can be named or anonymous.

const add = function(a, b) {
  return a + b;
};
console.log(add(2, 3));

3. Arrow Function
A new way to write functions using the => syntax. They are shorter and do not have their own this binding, which makes them useful in some cases.

const square = n => n * n;
console.log(square(4));

4. Constructor Function
A special type of function used to create multiple objects with the same structure. It’s called with the new keyword.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const user = new Person("Neha", 22);
console.log(user.name);

5. Nested Functions
Functions defined within other functions are called nested functions. They have access to the variables of their parent function.

function outerFun(a) {
    function innerFun(b) {
        return a + b;
    }
    return innerFun;
}

const addTen = outerFun(10);
console.log(addTen(5));

Loops concept in JavaScript

Raghul — Wed, 08 Jul 2026 14:42:10 +0000

JavaScript Loops

Loops in JavaScript allow a block of code to run multiple times as long as a given condition is satisfied. They help reduce repetition and make programs more efficient and organized. Loops offer a quick and easy way to do something repeatedly. Loops can execute a block of code a number of times. Loops continue running until the condition becomes false.

*In JavaScript, there are three types of Loops : *

1. for Loop
A for loop repeats until a specified condition evaluates to false. The for loop repeats a block of code a specific number of times. It contains initialization, condition, and increment/decrement in one line. The for statement creates a loop with 3 optional expressions:

for (expr1; expr2; expr3) {
  // code block to be executed
}

exp1 is executed one time before the execution of the code block.
exp2 defines the condition for executing the code block.
exp3 is executed every time the code block has been executed.

2. while Loop
The while loop executes as long as the condition is true. It can be thought of as a repeating if statement. The while loop loops through a block of code as long as a specified condition is true.

let i = 0;
while (i < 3) {
    console.log("Number:", i);
    i++;
}

3. do-while Loop
The do-while loop is similar to while loop except it executes the code block at least once before checking the condition. The do while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

let i = 0;
do {
    console.log("Iteration:", i);
    i++;
} while (i < 3);

The do while runs at least once, even if the condition is false from the start.
This is because the code block is executed before the condition is tested.

Loop concept in JavaScript

Raghul — Wed, 08 Jul 2026 14:41:13 +0000

JavaScript Loops

*In JavaScript, there are three types of Loops : *

for (expr1; expr2; expr3) {
  // code block to be executed
}

exp1 is executed one time before the execution of the code block.
exp2 defines the condition for executing the code block.
exp3 is executed every time the code block has been executed.

let i = 0;
while (i < 3) {
    console.log("Number:", i);
    i++;
}

let i = 0;
do {
    console.log("Iteration:", i);
    i++;
} while (i < 3);

The do while runs at least once, even if the condition is false from the start.
This is because the code block is executed before the condition is tested.

if Conditions in JavaScript

Raghul — Mon, 06 Jul 2026 15:46:47 +0000

JavaScript - Conditional Statements

JavaScript conditional statements are used to make decisions in a program based on given conditions. They control the flow of execution by running different code blocks depending on whether a condition is true or false. Conditions are evaluated using comparison and logical operators.

***Reasons to Use Conditional *

Control Program Flow: Decide which code to execute based on different situations.
Make Decisions: React differently to user input, data values, or system states.
Enhance Interactivity: Enable dynamic behavior in apps and websites.
Handle Multiple Scenarios: Manage different outcomes or error handling paths.
Improve Code Flexibility: Write adaptable, reusable code that can respond to change.

Types of Conditional Statements

1. if Statement
The if statement checks a condition written inside parentheses. If the condition evaluates to true, the code inside {} is executed; otherwise, it is skipped.

let x = 20;

if (x % 2 === 0) {
    console.log("Even");
}

if (x % 2 !== 0) {
    console.log("Odd");
};
// output: Even

2. if-else Statement
The if-else statement executes one block of code if a condition is true and another block if it is false. It ensures that exactly one of the two code blocks runs. Used when there are two possible outcomes. The else block runs when the if condition is not satisfied.

let age = 25;

if (age >= 18) {
    console.log("Adult")
} else {
    console.log("Not an Adult")
};
//output: Adult

3. else if Statement
The else if statement is used to test multiple conditions in sequence. It executes the first block whose condition evaluates to true. Allows checking more than two conditions. Evaluated from top to bottom until a true condition is found.

const x = 0;

if (x > 0) {
    console.log("Positive.");
} else if (x < 0) {
    console.log("Negative.");
} else {
    console.log("Zero.");
};
//output: Zero

4. Using Switch Statement (JavaScript Switch Case)
The switch statement evaluates an expression and executes the matching case block based on its value. It provides a clean and readable way to handle multiple conditions for a single variable. Used when one variable needs to be compared against multiple fixed values. Improves readability compared to long if...else if chains.

const marks = 85;

let Branch;

switch (true) {
    case marks >= 90:
        Branch = "Computer science engineering";
        break;
    case marks >= 80:
        Branch = "Mechanical engineering";
        break;
    case marks >= 70:
        Branch = "Chemical engineering";
        break;
    case marks >= 60:
        Branch = "Electronics and communication";
        break;
    case marks >= 50:
        Branch = "Civil engineering";
        break;
    default:
        Branch = "Bio technology";
        break;
}

console.log(`Student Branch name is : ${Branch}`);

//output: Student Branch name is : Mechanical engineering

5. Using Ternary Operator ( ?: )
The ternary operator is a compact shorthand for an if...else statement. It is called “ternary” because it takes three operands:

A condition to test.
An expression to evaluate if the condition is true.
An expression to evaluate if the condition is false.

condition ? expressionIfTrue : expressionIfFalse

let age = 21;

const result =
    (age >= 18) ? "You are eligible to vote."
        : "You are not eligible to vote.";

console.log(result);
//output: You are eligible to vote.

6. Nested if...else[TBD]
A nested if...else statement is an if...else block written inside another if or else. It is used to evaluate multiple related conditions in a hierarchical manner. Useful for handling complex decision-making logic. Deep nesting should be avoided to maintain code readability.

let weather = "sunny";
let temp = 25;

if (weather === "sunny") {
    if (temp > 30) {
        console.log("It's a hot day!");
    } else if (temp > 20) {
        console.log("It's a warm day.");
    } else {
        console.log("It's a bit cool today.");
    }
} else if (weather === "rainy") {
    console.log("Don't forget your umbrella!");
} else {
    console.log("Check the weather forecast!");
};
//output: It's a warm day.

Operators in JavaScript

Raghul — Sun, 05 Jul 2026 17:33:46 +0000

Operators in JavaScript

JavaScript operators are symbols or keywords used to perform operations on values and variables. They are the building blocks of JavaScript expressions and can manipulate data in various ways.

Types of Operators

Assignment operators
Comparison operators
Arithmetic operators
Bitwise operators
Logical operators
BigInt operators
String operators
Conditional (ternary) operator
Comma operator
Unary operators
Relational operators

Now,we are going to disscuss mainly about five Operators:

1.Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations on the operands. Here is a list of operators that are known as JavaScript arithmetic operators:

2.Comparison Operators
The JavaScript comparison operator compares the two operands. The comparison operators are as follows:

3.Bitwise Operators
The bitwise operators are used to perform bitwise operations on operands. Here is a list of bitwise operators:

4.Logical Operators
Logical operators are mainly used to perform the logical operations that determine the equality or difference between the values. The list provides all the JavaScript logical operators:

5.Assignment Operators
The Assignment operators are used to assign values to the operand. The following operators are known as JavaScript assignment operators:

Variables and Datatypes in JavaScript

Raghul — Sat, 04 Jul 2026 17:18:03 +0000

Variables and Datatypes in JavaScript

Variables and Data Types in JavaScript are fundamental concepts used to store and manage data in a program. They define how information is declared, stored, and manipulated during execution.

Variables: Declared using var, let, and const to store data values.
Primitive Data Types: Includes Number, String, Boolean, Null, Undefined, BigInt, and Symbol.
Non-Primitive Data Types: Includes Object, Array, and Function used to store complex data.

Variables

A variable is like a container that holds data that can be reused or updated later in the program. In JavaScript, variables are declared using the keywords var, let, or const.

var Keyword The var keyword is used to declare a variable. It has a function-scoped or globally-scoped behaviour.

var n = 5;
console.log(n);

var n = 20; // reassigning is allowed
console.log(n);

let Keyword The let keyword is introduced in ES6, has block scope and cannot be re-declared in the same scope.

let  n= 10;
n = 20; // Value can be updated
// let n = 15; //can not redeclare
console.log(n)

const Keyword The const keyword declares variables that cannot be reassigned. It's block-scoped as well.

const n = 100;
// n = 200; This will throw an error
console.log(n)

4.without keyword
In this we can reinsilate and it prints the last value declare.

i=10;
i=20;
console.log(i)

Data Types

JavaScript supports various datatypes, which can be broadly categorized into primitive and non-primitive types.

Primitive Datatypes
Primitive datatypes represent single values and are immutable.

Number: Represents numeric values (integers and decimals).

let n = 42;
let pi = 3.14;

String: Represents text enclosed in single or double quotes.

let s = "Hello, World!";

Boolean: Represents a logical value (true or false).

let bool= true;

Undefined: A variable that has been declared but not assigned a value.

let notAssigned;
console.log(notAssigned);

Null: Represents an intentional absence of any value.

let empty = null;

Symbol: Represents unique and immutable values, often used as object keys.

let sym = Symbol('unique');

BigInt: Represents integers larger than Number.MAX_SAFE_INTEGER.We can denote BigInt by using n at the end or the values.

let bigNumber = 123456789012345678901234567890n;

Non-Primitive Datatypes
Non-primitive types are objects and can store collections of data or more complex entities.

Object: Represents key-value pairs.

let obj = {
    name: "Amit",
    age: 25
};

Array: Represents an ordered list of values.

let a = ["red", "green", "blue"];

Function: Represents reusable blocks of code.

function fun() {
    console.log("GeeksforGeeks");
}

JavaScript

Raghul — Fri, 03 Jul 2026 18:14:41 +0000

JavaScript

What is JavaScript?
JavaScript is a programming language. It can update and change in both HTML and CSS. It can validate,manipulate and calculate data. It is most well-known as the scripting language for Web pages. It used to create dynamic content for websites. It's an interpreted language that executes code line by line, providing more flexibility.

On the client side, JavaScript works along with HTML and CSS. HTML adds structure to a web page, CSS styles it, and JavaScript brings it to life by allowing users to interact with elements on the page, such as actions on clicking buttons, filling out forms, and showing animations. JavaScript on the client side is directly executed in the user's browser.

On the Server side (on Web Servers), JavaScript is used to access databases, file handling, and security features to send responses, to browsers.

Reasons to Learn JavaScript

Core language for web development, enabling dynamic and interactive features in websites with fewer lines of code.
Highly in demand, offering many job opportunities in Frontend, Backend (Node.js), and Full Stack Development.
Supports powerful frameworks and libraries like React, Angular, Vue.js, Node.js, and Express.js, widely used in modern web applications.
Object-oriented and event-driven language, ideal for building scalable and responsive applications.
Cross-platform and runs directly in all modern web browsers without the need for installation.
Major companies like Google, Facebook, and Amazon use JavaScript in their tech stacks.

Basic Syntax of JS

console.log("Hello World!");

College Web Page

Raghul — Mon, 29 Jun 2026 18:07:22 +0000

CSS Animations

Raghul — Mon, 22 Jun 2026 17:56:40 +0000

CSS Animations

CSS animations control the movement and appearance of elements on web pages. We can animate HTML elements without using JavaScript.

@keyframes: The @keyframes rule in CSS is used to specify the animation rule.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: changeColor 3s infinite;
        }

        @keyframes changeColor {
            from {
                background-color: blue;
            }

            to {
                background-color: green;
            }
        }
    </style>
</head>

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

</html>

animation-name: It is used to specify the name of the @keyframes describing the animation.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: moveRight;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        @keyframes moveRight {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(200px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

animation-duration:
It is used to specify the time duration it takes animation to complete one cycle.
animation-timing-function:
It specifies how animations make transitions through keyframes. There are several presets available in CSS which are used as the value for the animation-timing-function like linear, ease,ease-in,ease-out, and ease-in-out.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: slide;
            animation-duration: 3s;
            animation-timing-function: ease-in;
            animation-iteration-count: infinite;
        }

        @keyframes slide {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(300px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

animation-delay: It specifies the delay of the start of an animation.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: fadeIn;
            animation-duration: 2s;
            animation-delay: 1s;
            animation-iteration-count: infinite;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

animation-iteration-count: This specifies the number of times the animation will be repeated.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-50px);
            }

            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

</html>

animation-direction: It defines the direction of the animation. animation direction can be normal, reverse, alternate, and alternate-reverse.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 2s infinite;
            animation-direction: alternate;
        }
        @keyframes move {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(200px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

animation-fill-mode: It defines how styles are applied before and after animation. The animation fill mode can be none, forwards, backwards, or both.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 3s forwards;
        }
        @keyframes move {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(200px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

animation-play-state: This property specifies whether the animation is running or paused.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: spin 4s linear infinite;
            animation-play-state: paused;
        }

        .box:hover {
            animation-play-state: running;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>