Multiple Animations

Lecture 88:- Multiple Animations

You can apply multiple animations to the same element by specifying multiple values for the "animation" property. Each animation value is separated by a comma, and the animations will be applied in the order in which they are listed.

Here is an example of how to apply multiple animations to an element:

cssCopy code

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

In this example, two animations are applied to the ".box" class. The first animation uses the "example1" @keyframes rule and animates the element's X position for 2 seconds with a linear timing function. The second animation uses the "example2" @keyframes rule and animates the element's Y position for 2 seconds with a linear timing function, repeating the animation indefinitely.

Multiple animations can be used to create complex animations that involve multiple properties and multiple stages. They can be used to create animations that are triggered by different events, such as hover or click, or animations that run simultaneously or sequentially.