Episode 31: Powerpoint animations done in CSS
Firstly, before I start, welcome to the 31+ followers who magically appeared on my medium page and who gave a lot of support to my post. Thank you and Hello, I’m Dania. GIF SCIENTIST, ANIMATOR, BLOGGER(NOW) and FRONT END CODER (hopefully). It’s really quite baffling as I will always question “where did ya’ll come from?”
Secondly, the link to the course I am doing was mentioned in the comments of the last post. My intention of not mentioning it was because I didn’t want to recommend a course that wasn’t great overall. Sure, the stuff I’ve learnt now is great but that’s me through only 10% of the course. I have yet 90% of it to discover. Just to clear the air that this is purely my reflection on a person’s Udemy course so that I can re-explain it to myself.
Thirdly, in short, I am at a coding bootcamp (Makers Academy in London) tackling topics completely different from this post. If you are looking for these posts (I wouldn’t say series as I’m not sure if it’s constant yet), I will write in the title (CSS) in the title of the blog post. Although, it wouldn’t harm to say to check out my other blog posts too. I kinda write five posts a week now ranging from project experience, bootcamp experiences and my knowledge on other languages I’ve learnt.
We’re cool? Let’s get to it.
I called this posts “powerpoint animations” as I’m pretty sure most of us have experienced or seen powerpoint. If you haven’t, powerpoint is a program that makes presentations or slideshows. There’s a feature called “word animations” where we can animate how our text can enter the page. This is part of what we’re going to cover today, if not the same concepts to other elements. If not, the list is below:
- keyframes
- animating text
- Getting rid of dat shake
- a trick when setting a button
- pseudo classes (button:hover, :link, :visted) etc
- styling technique of a button
- button::after? (Sneaky but trickster of tricks)
Keyframes:
This is a basic for animation but I suppose if you haven’t done animation, it’s quite tricky to explain. So, if we look at this GIF, this GIF is actually made with multiple of images. In animation, we call this “stop-motion” and we call those images, frames. In digital animation, the equivalent of frames is keyframes. If I am using AFTEREFFECTS (An amazing animation software by Adobe), they use keyframes to animate frame by frame.
Keyframes are actually a property in CSS we can use, which is quite cool. Let’s say I want a text to start from the right, move to the left a bit and centre itself. Let’s look at the code.
So, here I’ve written two animation properties but let’s take a look at the first one. Let’s analyse this line by line.
- @keyframes is how we call the keyframes css elements.
- The next (moveInLeft) is the animation name we can refer to or call later on…
- Now, we are setting points in the animation. 0% is when the animation starts and 100% is when the animation ends. We can even set percentages in between which gives us more flexibility. Obviously, the more you edit, the more you risk of having to be precise with the css element values in order for the animation to still be smooth. An animator tip, the less points you have, the smoother the movement but less detail. In this case, we don’t need detailed animation to move a text from right to left.
- At 0%, the opacity to 0 as I want the text to appear as it enters the page. This is like “whoa how did you do that, it looks way cooler than it is” and at 100% i’ll set it to 1. Yes, it’s strange that opacity 0 to opacity 100 is values such as 0 and 1.
- Then, I’m translating in the animation. -100px at 0% starting from the far left. At 80%, the keyframe will move the text from right to left. Then at 100%, it will go back to the centre. Take some time to read this.
Great, we now have our keyframe element and we can apply it to elements.
How to apply a keyframe:
Although we’ve made a keyframe, we now need to apply that keyframe to an element in our html. Since I said I wanted a text animation, I’m going to apply it to a text which I’ve called (“header-primary-main”).
All we have to do is call the animation “moveInLeft” to in the CSS block of header-primary-main like so…
Yes, I know you see two different properties and you’re wondering, why show the other one? The communication is not being clear. Well, with animations, we can either call the features individually or in one whole line. Let’s look at the code.
So, I’ve called the animation name “Move in Left” after letter-spacing. I am then setting the duration to 2 seconds. I am then setting a timing function to ease-out which means that it will go faster towards the end.
Now, look at “header-primary-second”. I just did all of that in one line by calling animation. Well how about that. Let me show you what this code does…
Volia! We just applied a keyframe animation to a HTML element in our CSS. Just to show what I meant by:
the less points you have, the smoother the movement but less detail.
I’m going to make the text flip and add more percentages to edit. Use your imagination and picture that I’ve applied this edited keyframe MoveInLeft to heading-primary-main element. Note: ROTATE is done in degrees.
Can you see that the animation is not as smooth, there’s a bit of a nudge (or pull back) that we can greatly notice compared to the slight jitter in the previous GIF of this. It really depends on whether you want smoothness or precision when it comes to animation, and now we have these tools at hand. That’s what I meant. Comment or message me if you don’t get it.
Getting rid of dat shake:
I don’t know if you are OCD about jitters but we never want jitters in smooth animations. It’s that feeling of “ergh it’s there” even though it’s really tiny. It’s like when you know a painting in your house is not centred by probably 3 degrees and that you are the only one who has to witness this disorder in your house. For these animations, these slight jitters occur based on the positioning I believe but no one really knows why. It’s so miniscule that if you are an OCD person or OCD about animation, that it would not create an itch.
However, we want to be safe for smooth animation. Perfection of a smooth animation impresses clients, people and makes us more modern creatives than we actually are. All we need for this is one feature in our CSS code.
Imagine I’ve put the header-primary-main and header-primary-second elements in a div block called heading-primary. The code I’m talking about is backface-visibility : hidden;
Whatever stuff that is going behind the scenes of our smooth animation (i.e when it’s trying to position itself accurately to the centre) is something we don’t have to see. We want smoothness…
Do you see that tiny evil static in our smooth animation? This is something we want to eliminate and my hypothesis to why it’s there because when our keyframes end, it centres the text where it’s supposed to be by a millimetre. Computers are as OCD as OCD can get.
That trick about buttons that I mentioned:
When we set a button in our html, what I didn’t know is that a button is an anchor. It’s normally used for hyperlinks as buttons are made so that when we click it, it goes to a page or a link right? However, when we are building a button that we have nowhere for it to go yet…we can set the href tag to #
# in the href tag means nothing, that the button so far goes nowhere. I’d thought I slip this in so I can keep tabs the next time I see this written on a button.
Pseudo Classes: (Buttons)
Although some of us know or have searched the pseudo word as “fake”, pseudo classes in CSS are called special classes. This is especially cool for elements because we can call modes like “hover, link, visited.” There are plenty of classes that you can dwell into in the following link below:
However, we’re going to talk about the following three I listed for now. Let’s take a look at my crazy code.
Above is the CSS code for a button. Now, let’s look at my html file.
You can see for the button at the highlight a href=”#”, I have given three classes for this button. Yes, we can call more than one class, what magic is this! It’s good to give buttons multiple classes because we might want to divide our styling amongst this classes …If you don’t get what i mean, neither do I at this point but I’m pretty sure when we’ve gone through my code, we’ll get it.
So, the first part of our code is this. We have called the button class along with pseudo classes. We have called the pseudo classes link, and visited in one CSS style element. Whoa! Yeah! We can do that!
The reason of this is because a button at default has a link colored and have a underline in blue and when we visit that link that turns purple. Styling wise, that sounds pretty basic so let’s change this.
My code should seem understandable if you have gone through my posts if not look up the properties I’ve placed.
However let’s take it a notch up. What if we want to give a bit of movement and a cool shadow effect when we hover over the button.
We simply call the pseudo classes hover and active. Hover seems quite explanatory, i.e when we hover over the button this should happen. Active is when the link is selected, i.e when we clicked the button.
Transform and box-shadow should be explanatory. However, in short, the button hover moves down -3 and has a blur shadow. Then when you click on the button, the moving down -1 is and the shadow is clearer.
Great. We’ve created a normal button that looks like when we click on it the button is pressed down. However, what if we wanted to add a cooler affect to make our button way cooler. When I hover over the button, it expands with a fade out glow and then went we hover away from it, it shrinks the glow.
Am I going to far? Yes design-wise, but this will introduce the use of pseudo class after.
What is the strategy here design-wise to code-wise?
What was our concept design-wise? We wanted our button to expand with a fade out glow when we hover over it, and contract when we are no longer hovering over it. Okay, what’s the tackle for this design wise that links to how we could do it code.
Well, we could make another shape that is similar to the shape of our button, put it behind our button and put this glow effect on that button. However, we need to know that this shape has to follow the movement of our button.
I feel that is the best way I could explain my concept as that’s what I grabbed. If you don’t understand, comment down below and I’ll try explain it again.
This is where the ::after pseudo classes comes in.
::after Pseudo classes.
The after pseudo class inserts something after the content of the element that it’s put on. Have this concept in mind and let’s look at some code.
So, we’ve called button class and placed the pseudo after. Here we’ve set the button shape that will be exact to the current button we have. However, what’s important here is the z-index. The z-index with the value of -1 is what puts our after duo button behind the button we had just created. Without the z-index, our button:: after will be placed in front of our button. This is bad because the button we’ve created will now be masked as such:
Does that make sense? I hope it does. Now, if we look at the next code we are looking yet, we are styling a different class. Remember that we had set different classes on an element of the button.
This is where we start segmenting the CSS styling into the different classes. The reason being for this is because for the ::after class, we are wanting to segment the styling elements into different classes so that for practice, it’s easier for us to edit and know where everything is. (I believe this is why but I may be wrong, but that’s how it made sense to me). I’m pretty sure that it’s also so we can different versions of the same button element when it’s called but that experimentation is for a later time..
For now, we are setting the background colour to white in the button-white class. Cool, we have this similar shape that is like our button behind the button. Let’s now get our glow on.
We will always be relating to our ::after pseudo class button given our concept of the animation will be on it. So, first we have hover. When we hover over the button (button::hover). In that CSS styling, we have the button expanding, the background colour is white and the opacity is 0. The outcome is like so.
However, if we refresh this page, our animations and elements on the page come in like this…
For consistency’s sake in design, let’s emerge the button as well as the text emerges on the screen. Do you remember that we had multiple classes for this one button so we could segment our styling. Well, we’re using the last one called .button-animated. Let’s say we want the button to emerge from below and let’s take a look at the code.
Everything seems explanatory here except for two new things. Let’s go through it anyway. So, here we are calling an animation called “moveInButton”. Then we call the animation duration, the animation eases out and the animation delays 0.75 seconds. Yes, one of the new things we can add in that animation is the delay in one line. You can also can call animation-delay as well as a property. What is the animation moveInButton?
In our animation, moveInButton, we are changing the opacity from 0 to 1. This is the effect of having the button emerging. Then, the button starts from 30px (positives are lower on the screen) which means it starts at a lower point which then comes up to the original centre point. Now, let’s implement this animation into the code, and our outcome is as such!
Woo. Let me tell you writing 12 minutes of stuff I learnt is not easy. Any questions or any mistakes I’ve made, write it in the comments below! Onward to the next post as I’m already a day behind, catch ya later.
Fun fact of the day:
Sometimes, you realise “oh shoot, I have to change one word from “button” to “buttons” and if I do command+F in my code editor, it says I have 20 buttons! This is going to take me a while to change all this and I’ll probably make an error since it’s late at night now…
Fret not, my friend. If we simply do command+D, this will give us multiple cursors to place on our text editor and we can change all the points we give at the same time. Wicked.
