DCSS - CSS Animations [LESSON]

CSS Animations

Animations are objects that move. You can create animations using CSS. There are many programs to create animations and you can use programming, such as JavaScript, to create them. But you can also do simple animations using CSS. Before we learn how to animate, you need to learn some animation terms.

Animation Terms
Term	Definition
Animation	A process to turn still images into moving images.
Frame	An image or drawing.
Motion	Several frames viewed very quickly to give the impression of motion.
Aspect Ratio	The ratio of the width to the height of an image. It is important to keep the aspect ratio correct.
Frame Rate	How many frames are displayed per second.
Set	The background of the animation.
Keyframe	The starting and ending points of the transition.
Animation Duration	How long the animation will take place.
Animation Delay	The amount of time to delay the start of the animation.
Iteration	How many times the animation will run before it stops – it is how many times the animation loops.
Speed Curve	The speed of the animation.
Ease In/Out	The speed that the animation starts and ends.

Using CSS to create simple animations is easier than learning JavaScript, the animations will run easier in CSS and the browser can control the animation using CSS.

To create an animation in CSS, you must create the animation in an HTML element. You use the @keyframes code to gradually change from one style to another style. If you are creating the entire animation in CSS, then you can use the <div> element to create the animation.

Animation Properties and Values

Animation Properties and Values
Property	Values	Example
animation-name	Varies	animation-name: square;
animation-duration	In seconds or milliseconds	animation-duration: 3s; or animation-duration: 10ms;
animation-delay	In seconds or milliseconds	animation-delay: 2s;
animation-iteration-count	A number or infinite	animation-iteration-count: 3;
animation-direction	Normal (forwards), reverse, alternate, alternate-reverse	animation-direction: reverse;
animation-timing-function	Ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)	animation-timing-function: ease-in;
animation-fill-mode	None, forwards, backwards, both	animation-fill-mode: backwards;

See this video on how Animation works.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION