I tried to write a CSS3-animation manual as clear and simple as possible. Let’s go! In order to use animation in your project, you only have to do two things: 1. Create an animation. 2. Connect it to the element that has to be animated and indicate required features. The animation is a set of key frames, which is stored in and looks like this: `css` @keyframes test-animation {0% {width: 50px;}100% {width: 150px;}} Let us sort out what we have here. The keyword indicates the animation itself. Next comes its name, I called it . Curved brackets contain the list of key frames. In this case it is the starting frame and the ending frame . As well, starting and ending frames can be written as keywords and . `@keyframes` `test-animation` `0%` `100%` `from` `to` Now have a look at the following code. You can write like this as well: @keyframes test-animation {from {width: 50px;}30% {width: 99px;}60.8% {width: 120px;}to {width: 150px;}} Take into consideration that if the starting ( , ) or ending ( , ) frame is not given, the browser will set for them such estimated value for animated features as if the animation was not applied. `from` `0%` `to` `100%` _Here and further on for more convenience I wrote few JavaScript lines as examples, that will in turns add or delete a class with animation on the element, so just click this element in order to play the animation. _ __Connecting the animation to the element__ is done by two commands: element {animation-name: current-anim-name;animation-duration: 2s;} Rule `animation-name` sets the name for created animation . Rule states for how many seconds the animation will play. It can be indicated in seconds or in milliseconds . `@keyframes` `animation-duration` `(3s, 65s, .4s)` `(300ms, 1000ms)` You can group key frames: @keyframes animation-name {0%, 35% {width: 100px;}100% {width:200px;}} Few animations can be set for one element, their names and parameters should be written in an order they are set: element {animation-name: animation-1, animation-2;animation-duration: 2s, 4s;} ## Animation delay feature identifies delay before playing the animation, it is set in seconds or milliseconds: `animation-delay` element {animation-name: animation-1;animation-duration: 2s;animation-delay: 5s; // Before starting this animation, 5 sec will pass.} ## Number of animation plays As a value for feature we set any positive value from 0, 1, 2, 3… etc. or for infinite repeat. `animation-iteration-count` `infinite` element {animation-name: animation-1;animation-duration: 2s;animation-delay: 5s;animation-iteration-count: 3; //this animation plays 3 times} ## BEFORE and AFTER state of animation Feature identifies in which state the element would be before the animation starts and after its completion. `animation-fill-mode` * — after animation completion the element state would correspond to the last frame. `animation-fill-mode: forwards;` * — after animation completion the element state would correspond to the first frame. `animation-fill-mode: backwards;` * — before the animation start the element state would correspond to the first frame and after its completion to the last one. `animation-fill-mode: both;` In example below the same animation is appointed to three elements but each element has different value : `animation-fill-mode` ## Animation launch and pause We do it either with the feature , which takes only 2 values: either , or . Pretty simple :) `animation-play-state` `running` `paused` ## Animation direction With feature we can manage the direction of animation play. Its parameters can take few values: `animation-direction` * — animation plays forward, which is a usual direction for animation. `animation-direction: normal;` * — animation plays in reverse, from `to` to`from`. `animation-direction: reverse;` * — even animation replays will go in reverse direction and odd — in normal. `animation-direction: alternate;` * — even animation replays will go in normal direction and odd — in reverse. `animation-direction: alternate-reverse;` ## Function for allocating animated values by time Rule allows setting a special function which is responsible for animation replay speed. Please note that animation replay speed is mostly neutral, i.e. its immediate speed will be different in different areas. For now for this rule few already built-in arguments exist: `ease`, , , , , , `animation-timing-function` `ease-in` `ease-out` `ease-in-out` `linear` `step-start` `step-end.` However, you can create such functions yourself. A special function takes four arguments and, based on them, builds value distribution curve during the animation process. You can practice in creating your functions and have a look at their work or . `animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);` here here Finally, the animation can be turned into a set of discrete values with the help of function , where the role of its arguments is taken by the amount of its steps and direction, which can take values or . In the following example, the animation will consist of 7 steps, the latest of which will be done right before the animation completion: `steps (amount of steps, direction)` `start` `end` element {animation-timing-function: steps(7, end);} Value distribution curves of animation of values by time ## Browser support CSS-animations have rather good support and it will be getting better. You can learn more details about animation support by desktop and mobile browsers from . here ## Materials for further read * — most famous library for CSS-animations. Animate.css * — another well-known library for animations. Effect.css * — good set of examples. CSS3 Animation Cheat Sheet * — most modern animation guide. MDN CSS Animation * Play with . Cool and super-smooth effects. Bounce.js That’s it! There are few more things that we did not cover, but you can find them in the materials listed above. And you have to know that right know you just learnt approximately 97,8% of CSS3-animation. Congrats! Written by Pavel Pashkovsky Want to learn more? Check out here

CodePen

Mozilla

Super

Building an app: React Native vs Ionic

Missing part of Redux Saga Experience

Tell about your business challenge, needs, or new product ideas.

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

CSS3 Animation Step by Step Guide

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Creating a Simple Diagram by Using Elkjs and React Flow

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

Recommended Read: 11 JavaScript Animation Libraries For 2019

10 JavaScript Animation Libraries to Follow

App Design Made Easy

Creating a Simple Diagram by Using Elkjs and React Flow

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

Recommended Read: 11 JavaScript Animation Libraries For 2019

10 JavaScript Animation Libraries to Follow

App Design Made Easy

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps