How do I use transitions and animations on css

Question

I used to be regular in coding but then school resumed and I had to drop it. So I might have forgotten some things. Please help me.

Answer 1

animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

There are three key advantages to CSS animations over traditional script-driven animation techniques:

They’re easy to use for simple animations; you can create them without even having to know JavaScript.

The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.

Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

https://code.sololearn.com/WfP8ii13w0AX/?ref=app

Answer 2

transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

You can add transition by using transition property for example:

transition: all 0.3s ease;

Thanks and Happy Coding!