The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model https://developer.mozilla.org/en-US/docs/Web/CSS/transform#:~:text=The%20transform%20CSS%20property%20lets,the%20CSS%20visual%20formatting%20model.
One example of a transform is the rotate() function, which rotates an element by a specified angle around its center point. This transform could be used on a website to create an eye-catching design element, such as a logo or a banner.
Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript. https://developer.mozilla.org/en-US/docs/Web/CSS/transition#:~:text=Transitions%20enable%20you%20to%20define,or%20dynamically%20set%20using%20JavaScript.
The animation property allows you to change the properties of an element over a specific duration, while transition defines how an element changes over a specific duration. https://blog.logrocket.com/understanding-animation-transition-timing-functions-css/#:~:text=There%20are%20two%20ways%20to,changes%20over%20a%20specific%20duration.
hey’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. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#:~:text=There%20are%20three%20key%20advantages,often%20perform%20poorly%20in%20JavaScript.
It is showing me all the ways I can execute CSS in my code to make my web pages look better.