Nowadays, more and more websites are using animations, whether that be in the form of GIFs, SVGs, WebGL, background videos and so on. When used properly, animation on the web brings life and interactivity, adding an extra layer of feedback and experience for users. In this tutorial I am going to introduce you to CSS animations; a highly performant way of doing things which is becoming more and more popular as browser support improves. Having covered the basics, we're going to build a quick example which will animate a square element into a circle: An Introduction to @keyframes and Animation The main component of CSS animations is @keyframes , the CSS rule where animation is created. Think of @keyframes as being stages along a timeline. Inside @keyframes , you can define these stages, each having a different style declaration. Next, to make CSS animations work, you need to bind the @keyframes to a selector. This will gradually parse all the code inside the @keyframes declarations and change the initial style to the new style, based on the stages
↧