CSS basics (Part I — Animations)

Aladin Bensassi
Jul 10 · 3 min read

If I had a nickel for every time someone told me they didn’t get CSS, didn’t like it, or how complicated it is, I’d probably have enough money to not need to work anymore.

CSS is neither hard nor complicated, it’s amazing, fun and simple to write, once you understand it, and just as an example, these are a few graphics and animations I created fully in CSS:

These are just a few examples of fun things you can accomplish with CSS, without mentioning, of course, styling the hell out of the project you’re working on, and having it be lightning fast.

The pillars of CSS

If I had to divide it into separate chapters, it would look something like this:

· Animation (What Part I will cover)

· Typography

· Most used CSS properties

· Backgrounds

·Borders

· Shapes

· Positioning

· Selectors

· Browser support

· Functions

· Units

What will the first part of this article cover

For the first article of this series, I decided to focus on two subjects, Animations, and Typography. These are two areas a lot of junior developers struggle with and hopefully, I’ll explain everything as clearly as I can.

Animations

CSS3 animation was in my opinion, a big revolution in the web industry, simply because we were no longer limited to using Javascript and jQuery to animate our webpages.

Now let’s start with the basics, You can animate your objects on the 3 axes X, Y and Z, you can zoom in, zoom out, blur, fade, grayscale… But to do that you’ll have to learn most of the effects CSS has to offer.

These are the seven animation properties:

animation-name: animation-name;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

Animaion-name: Specifies the name of the @keyframes animation duh.

Animation-duration: Specifies how many seconds or milliseconds an animation takes to complete one cycle.

Animation-timing-function: Specifies the speed curve of the animation.

Animation-delay: Specifies when the animation will start.

Animation-iteration-count: Specifies the number of times an animation should be played.

Animation-direction: Specifies whether or not the animation should play in reverse on alternate cycles.

Animation-play-state: Specifies whether the animation is running or paused.

You might be thinking that having to write all of this every time would be a pain, but lucky for us there is an alternative syntax, which goes something like this:

animation: animation-name 1s linear 0s infinite alternate;

Now to where the magic really happens. After identifying your animation and all its properties, it’s time to animate the object, and the way to do that depends on how many states the animated element has. If it’s only two, you can do this:

@keyframes animation-name{
from{/* Your first state */;}
to{/* Your last state */;}
}

But if you have more states you can do this:

@keyframes animation-name{
0%{/*animation*/;}
25%{/*animation*/;}
50%{/*animation*/;}
75%{/*animation*/;}
100%{/*animation*/;}
}

Conclusion

The possibilities are truly endless for what you can do with CSS’s animations, I’ve seen people do amazing things with it, and I even coded my own pure CSS slider with it back in the day, which was used by thousands of websites because of how lightweight it is. Use your imagination and put what you’ve learned to the test, surprise me and surprise yourselves.

Aladin Bensassi

Written by

Web developer, frontend consultant, avid reader, and a total tech geek. I work closely with Startups and Big Businesses. Find me on http://AladinBs.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade