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
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.
Top comments (0)