CSS Transitions and Animations | Square to Circle | CSS animation tutorial | CSS tutorial
Before CSS3 rising, front-end developers were tossed into a cold sweat, when they heard a word «animation». And all because one reason: it was very non-trivial task to make quality and beautiful animation at those old days. CSS could not do it, so all the animations were made with JavaScript. We’ve had to shovel a lot of forums to find the same fellow sufferers, and to spend a lot of time on development process, but in the end you might hear from your lead designer: «All right, could be worse.» And when finally CSS3 went to release state, the fireworks were shot hard until the morning, and the champagne flowed like a river. It was a memorable day for all web developers (the next such day was when Microsoft announced the termination of Internet Explorer support). With the advent of CSS3, many previously challenging issues turned into a simple and pleasant tasks. The same applies to animations in CSS.
CSS transitions
CSS transitions make it possible to change the CSS properties smoothly and for some time. So you can control the process of element transition from one state to another. Let's start with the simplest example, and continue on.
When you hover over the square, the background color slowly changes.
Now let us consider in detail how to manage transitions in CSS. We have 5 properties that allow us to control transition animation:
transition-property;
transition-duration;
transition-timing-function;
transition-delay;
transition;
transition-property specifies a list of properties that will be animated. Unlisted properties will vary in the usual way. You can animate all of the properties for a particular element, specifying the value as «all». If you do not specify any properties, the default value will be «all» anyway.
Watch video CSS Transitions and Animations | Square to Circle | CSS animation tutorial | CSS tutorial online without registration, duration hours minute second in high quality. This video was added by user Engineers Revolution 28 March 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,525 once and liked it 29 people.