CSS Animation Basics

Hello coders, it is the 118th blog into the coding journey. For my newer readers I am revisiting HTML and CSS. Today’s lesson was practicing CSS animations and understanding concepts to using it.

There are two ways to use CSS animations the first is transitions which are usually things like hovering over an element and the transition is changed. The other is just called animation, this deals with whole elements being changed, not just during hover.

Understanding concepts is the key thing to take away from today’s lesson. Code and languages change all the time but as long as you understand the concept it will always be the same.

The two basic concepts to understanding transitions and animations is the documentation which is good to always have in another tab while you work with CSS is this reference website.

The basic format for transitions is 

transition-property transition-duration transition-timing-function and transition-delay.

The basic format for animation is

animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-mode and animation-play-state.

By understanding these concepts it allows you to write animation code all in one line. The property of the animation is affected depending on the order the code was written.

Today’s practice included creating an animated button, drop down menu, using classes for transitions. Then practice on animation by learning about key frames, iterations & directions, fill mode, duration timing functions, and play states.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Up ↑

%d bloggers like this: