Reading-Notes

CSS Transitions|Transformations | Animations

animation and transition in CSS

CSS transitions allow you to change property values smoothly, but they always need to be triggered like hover. Property changes do not take effect immediately. Over a period of time, the property changes take place. For example, if you change the color of an element from white to black, the change occurs instantly. The CSS changes occur at time intervals following an acceleration curve which can be customized.

Animations transitioning between two states are called implicit transitions as the states between the start and final states are defined by the browser implicitly.

CSS animation allows animation of HTML elements, unlike transition which only performs a point A to point B operation but can also make many more operations in between. Animations consist of two steps, the CSS animation defined in stylesheets and a set of keyframes indicating the start and end states of the animation.

CSS | Transitions

CSS3 has introduced countless possibilities for UX designers, and the best thing about them is that the coolest parts are really simple to implement

Transitions in CSS allows us to control the way in which transition takes place between the two states of the element. For example, when on hovering your mouse over a button, you can change the background color of the element with help of CSS selector and pseudo-class. We can change any other or combination of properties, though. Transition allows us to determine how the change in color takes place. We can use the transitions to animate the changes, and make the changes visually appealing to the user and hence, giving better user experience and interactivity. In this article, we will show you how to animate the transition between the CSS properties.

CSS | transform Property

The transform property in CSS is used to change the coordinate space of the visual formatting model. This is used to add effects like skew, rotate, translate etc on elements.

Note: The transformations can be of 2-D or 3-D type.