Creating a Simple Animation

Lecture 86:- Creating a Simple Animation

Here is an example of how to create a simple animation using CSS:

cssCopy code

@keyframes example {  from {    transform: translateY(0);  }  to {    transform: translateY(100px);  } } .box {  width: 100px;  height: 100px;  background-color: red;  animation: example 2s linear infinite; }

In this example, the @keyframes rule is used to define the animation. The animation moves a div element (with a class of "box") from its current position to 100 pixels below its current position over the course of 2 seconds, with a linear timing function. The "infinite" value is used to make the animation repeat indefinitely.

You can adjust the duration, timing function, and number of iterations to create a variety of animations with different behaviors. You can also animate multiple properties at the same time, such as changing the background color and the position of an element.