Speaker A
The easiest way to animate something is to use the animation property. It is a shorthand for multiple animation properties like animation name, duration, timing function, count and others.
Learn the easiest way to create smooth web animations using CSS animation and transition properties with practical examples and timing functions.
Key Takeaways
- CSS animation and transition properties provide powerful shorthand methods for creating smooth animations.
- Timing functions greatly affect the feel of animations and can be customized using cubic-bezier curves.
- Combining CSS with JavaScript enables dynamic and responsive UI animations that adapt to user interaction.
- Using pseudo elements and layering techniques can create visually appealing effects like sliding backgrounds and shine.
- Understanding core animation principles allows developers to build both subtle and complex web animations.
What the video covers
- The video explains the CSS animation shorthand property and how to use keyframes to choreograph animations.
- It covers timing functions like linear, ease-in, ease-out, and cubic-bezier for smooth and natural motion.
- Demonstrates how to use the transition property for natural style changes between states.
- Shows a popular UI pattern using a 'ghost' element and JavaScript to create a sliding background effect on navigation menus.
- Explains stacking buttons with relative and absolute positioning to create expandable button groups.
- Details creating button animations such as scaling, glowing, and shine effects using pseudo elements and transitions.
- Introduces the concept of 3D animations on the web using CSS perspective and transform-style properties.
- Emphasizes core motion principles as the foundation for all web animations, from simple to complex.
- Highlights the interplay between CSS for styling and JavaScript for dynamic measurements and control.
- Encourages experimenting with timing functions and CSS properties to achieve desired animation effects.
Full Transcript — Download SRT & Markdown
Speaker A
We then target the animation name using the keyframes property to actually animate that element.
Speaker A
This name doesn't matter, for example, we could have used move or slide and it will still work.
Speaker A
Then we are telling it to take exactly two seconds to finish the animation.
Speaker A
The timing function is pretty interesting and we will cover it in a minute, but ease-in-out tells the element to start slowly, speed up in the middle and then slow down again at the end.
Speaker A
This makes the movement look smooth and natural, and animation count is pretty straightforward.
Speaker A
Like if you put nothing, the browser plays the animation and stops.
Speaker A
If you write a number, the animation will play that many times.
Speaker A
Since we have written infinite, it keeps doing this loop forever.
Speaker A
The keyframes are the actual script or choreography for the movement.
Speaker A
We use percentages to tell the browser what should happen at specific moments during those two seconds.
Speaker A
Like translate is a pretty basic property.
Speaker A
At 0%, the element sits at its original spot.
Speaker A
At the one second mark, which is 50% of two seconds, the element has moved two rem to the right.
Speaker A
By the time the two seconds are up, it moves back to zero.
Speaker A
Since we have set 0% and 100% to the same value.
Speaker A
A pretty common and effective technique for animation.
Speaker A
If your animation just has a start and end state, we can do it just like this.
Speaker A
From is like the start or 0% and to means end or 100%.
Speaker A
Transform rotate is a pretty basic property that does exactly what it says.
Speaker A
In the same way, I've used very basic properties to create these animations.
Speaker A
I've just put effects like scale, skew, width, opacity and others inside keyframes.
Speaker A
Web animation is built on a few core motion principles.
Speaker A
Once you understand these, you can create almost any animation you imagine.
Speaker A
From subtle UI transitions to complex interactive effects.
Speaker A
Every animation, no matter how advanced it looks, is just a combination of these basics.
Speaker A
Now, before we move on with the animations, let me first explain timing functions.
Speaker A
CSS already gives us a few keywords like linear, ease-in, ease-out and others.
Speaker A
They are self-explanatory as you can see from these examples.
Speaker A
Linear follows the same speed throughout the animation.
Speaker A
Ease slows down at the start and end.
Speaker A
Ease-in starts slow and speeds up at the end.
Speaker A
Imagine how a car starts from a red light.
Speaker A
Ease-out does the opposite like the car is coming to a stop.
Speaker A
Then there is cubic-bezier where you can play all sorts of timing functions.
Speaker A
It looks complex, but if you use a tool like this, things will start to make sense.
Speaker A
Imagine we are moving something from the bottom left to the top right corner.
Speaker A
Linear would be connecting the two with a straight line.
Speaker A
A slow start means that it will pick up speed later.
Speaker A
And a fast start means it has to slow down somewhere because the time is constant.
Speaker A
It is simple and intuitive math and you have to play with it to get it yourself.
Speaker A
These curves can create much smoother transitions that the default ones usually lack.
Speaker A
Now that we have covered basic animation styles and timing functions, it is time to start animating some real stuff.
Speaker A
This first one is very simple, but I want to show this transition property as well.
Speaker A
As the name suggests, transition property allows us to transition from style X to Y naturally.
Speaker A
Just like the animation property, it is a shorthand for multiple properties.
Speaker A
First, you select what you want to animate.
Speaker A
Then the duration and timing function.
Speaker A
Let us see another brilliant use of transition property.
Speaker A
This is a very popular UI pattern.
Speaker A
A navigation menu where the active background does not just appear and disappear.
Speaker A
It slides and morphs to fit the link you are hovering over.
Speaker A
It feels organic, almost like a liquid magnet.
Speaker A
To achieve this, we have to cheat a little.
Speaker A
The ghost element.
Speaker A
If you look at the HTML, you will see a div called links-tab-active.
Speaker A
It is empty.
Speaker A
It does not contain any text.
Speaker A
This is our ghost.
Speaker A
We place it absolutely, so it can float freely on top of the menu.
Speaker A
We also use z-index to make sure it sits behind the text links, acting like a spotlight background.
Speaker A
CSS is great at styling, but it is terrible at math.
Speaker A
It doesn't know that the home link is 60 pixels wide, but the services link is 90 pixels.
Speaker A
This is where JavaScript steps in.
Speaker A
We create a function called move.
Speaker A
It acts like a tailor with a measuring tape.
Speaker A
When you hover over a link, JavaScript instantly measures four things about that specific link.
Speaker A
How wide is it?
Speaker A
Client width.
Speaker A
How tall is it?
Speaker A
Client height.
Speaker A
How far from the left is it?
Speaker A
Offset left.
Speaker A
How far from the top is it?
Speaker A
Offset top.
Speaker A
Once JavaScript has those measurements, it grabs our ghost element and forces it to adopt those exact numbers.
Speaker A
It tells the ghost, hey, the user is looking at that link.
Speaker A
I need you to move to 150 pixels left and shrink your width to 80 pixels.
Speaker A
But if we just use JavaScript, the background would teleport instantly.
Speaker A
That is ugly.
Speaker A
That is where this one line of CSS comes into action.
Speaker A
Even though JavaScript changes the numbers instantly, CSS steps in and says, I will take 0.3 seconds to slide you to those new coordinates.
Speaker A
This creates the illusion that the background is intelligently sliding and reshaping itself to follow your mouse.
Speaker A
We are using all because we are changing position and width simultaneously.
Speaker A
This is exactly like example one.
Speaker A
But we are also creating a pseudo element and scaling it on hover.
Speaker A
Because I use transition all the time, I've created a variable that can be used multiple times without me actually typing it over and over again.
Speaker A
This is also very similar.
Speaker A
But instead, we are doing everything for the x-axis.
Speaker A
It is so simple, yet so effective just because of this single line of CSS.
Speaker A
Enough links, let's do some buttons.
Speaker A
This one is also pretty common.
Speaker A
You click one option to reveal more.
Speaker A
We set position relative on the parent and position absolute on all the buttons inside it.
Speaker A
This allows us to stack the buttons on top of each other, occupying the same physical space.
Speaker A
We give the main button a higher z-index so it sits on top.
Speaker A
The option buttons are hidden underneath the main button.
Speaker A
We also scale them down.
Speaker A
So they are physically smaller while hiding.
Speaker A
At this point, to the user, it looks like just one single button.
Speaker A
Then on click, we toggle the class active on the parent.
Speaker A
This blows them back up to full size and moves them to the specific coordinates.
Speaker A
Pretty simple stuff.
Speaker A
This next animation is also very simple.
Speaker A
We are adding an animation on click that does the following.
Speaker A
At 0%, we are keeping it as it is.
Speaker A
Then as the time goes, we are tweaking it to get a desired effect.
Speaker A
Like as you can see at 50%, the icon is the biggest, furthest and has a bigger glow.
Speaker A
You can see this more clearly if I increase the animation duration.
Speaker A
Another very common button animation is this shine effect we see everywhere.
Speaker A
It is actually very simple.
Speaker A
We create a pseudo element and position it left -100% of the button.
Speaker A
On hover, we change it to positive 100% resulting in this moving light effect.
Speaker A
If I set the left to zero and increase the opacity, you can see it is just a linear gradient that is being skewed a little.
Speaker A
This is one of the coolest things you can do with CSS because it breaks the flat rule of the web.
Speaker A
Usually, web pages are 2D.
Speaker A
Everything moves up, down, left or right on the X and Y axis.
Speaker A
But here, we are moving along the Z axis, which is depth.
Speaker A
This is the most important line of code here.
Speaker A
Without it, the animation will not look 3D.
Speaker A
It will just look like the card is getting squashed and stretched.
Speaker A
Think of perspective as the distance between the user's eyes and the screen.
Speaker A
If you set it to 100 pixels, it is like holding a book right against your nose.
Speaker A
At a bigger value like 800 pixels, it looks natural, like holding a card at arm's length.
Speaker A
Transform style preserve-3D is also very important.
Speaker A
You are telling the browser, hey, this container is a 3D space, do not flatten the elements inside it.
Speaker A
Let the children keep their own 3D position.
Speaker A
In the real world, if you write on a piece of paper and flip it over, you cannot see what is on the front.
Speaker A
But on websites, elements are usually transparent or visible from behind.
Speaker A
We have two separate HTML elements, one for the front and one for the back.
Speaker A
We glue them together using position absolute, but we tell the browser, if this side is facing away from the user, make it invisible.
Speaker A
The front side starts at zero.
Speaker A
So it's facing you.
Speaker A
We rotate the back side 180 degrees, so it's currently facing away.
Speaker A
Because of backface-visibility hidden, you cannot see the back card yet.
Speaker A
On click, we rotate the entire container 180.
Speaker A
The front which was at zero, rotates to 180.
Speaker A
Now it is facing the back, so it vanishes.
Speaker A
The back which was at 180, rotates another 180 to 360, which is zero.
Speaker A
Now it's facing the front, so it appears.
Speaker A
Notice we used that custom cubic-bezier again.
Speaker A
Because of this, the card swings slightly past the finish line and settles back.
Speaker A
Giving it a sense of physical weight and momentum.
Speaker A
You can use perspective for scroll animations as well.
Speaker A
But this time it's on the X-axis and I used Framer, the sponsor of this video.
Speaker A
To create this in just a few clicks.
Speaker A
Framer is a website builder trusted by everyone from startups to Fortune 500 companies.
Speaker A
I really like its web animation capabilities.
Speaker A
Like, take this scroll animation as an example.
Speaker A
I can just go into the effects panel and set a scroll transform like this.
Speaker A
Then choose a trigger point.
Speaker A
Which is the section in our case.
Speaker A
Then to set the keyframes.
Speaker A
We have the from and to states.
Speaker A
First, I will set the opacity and scale, and then rotate the section 90 degrees on the X-axis.
Speaker A
Then offset it like 50 pixels in the Y direction and we are done.
Speaker A
The two state can stay as is, because that's where the animation will end.
Speaker A
To add some depth, I already set the perspective to 800 pixels.
Speaker A
Can you believe we did this in like 30 seconds?
Speaker A
Some animations in Framer literally take one click.
Speaker A
Yes, one click.
Speaker A
And you have something like this.
Speaker A
Framer is packed with amazing tools and animations.
Speaker A
If you want to try it out, use my link in the description and apply the code Sajid to get a free month of Framer Pro.
Speaker A
This is one of the most satisfying animations you can build for an e-commerce site.
Speaker A
It solves a specific problem.
Speaker A
When a user clicks buy, how do they know it worked?
Speaker A
We could just show a boring item added text.
Speaker A
But instead, let us physically throw the item into the cart.
Speaker A
When you click the button, we do not move the actual product image.
Speaker A
If we did, the design would break.
Speaker A
Instead, we create a clone.
Speaker A
We immediately stick this clone exactly on top of the original image using position fixed.
Speaker A
To the user, nothing has changed yet.
Speaker A
But now we have a floating copy that is free to move anywhere on the screen without messing up the grid.
Speaker A
To make the image fly, we need to know two things.
Speaker A
Where are we starting?
Speaker A
The product image.
Speaker A
Where are we going?
Speaker A
The cart icon.
Speaker A
We use getBoundingClientRect for this.
Speaker A
Think of it as the browser's internal GPS.
Speaker A
It gives us the exact X and Y coordinates of those elements on your screen.
Speaker A
We calculate the difference.
Speaker A
Destination minus start equals distance to fly.
Speaker A
Element.animate is a modern JavaScript tool that works just like CSS keyframes, but for dynamic values.
Speaker A
We tell the browser, start at 0,0, right where the clone was created.
Speaker A
End at the calculated destination coordinates.
Speaker A
While you move, shrink down, scale 0.1.
Speaker A
And fade out, opacity zero.
Speaker A
This creates the illusion that the item is physically traveling across the screen and diving into the cart.
Speaker A
Animation is all about timing.
Speaker A
If we updated the cart number the moment you clicked, it would feel off because the item hasn't reached the cart yet.
Speaker A
We use a set timeout of 700 milliseconds, matching our flight time, to wait until the image hits the icon.
Speaker A
Once it lands, we update the number and play a quick pulse animation on the cart icon using .animate.
Speaker A
In the cart example, we are just sending the element from point X to Y.
Speaker A
What if you want to follow a specific path?
Speaker A
That is where this offset-path property comes in.
Speaker A
Think of offset-path as building the train tracks.
Speaker A
Content-box tells the browser.
Speaker A
Use the edge of my own box as the track.
Speaker A
Defining the track does not make the train move.
Speaker A
It just sits at the start.
Speaker A
Offset-distance 0% means start of the line.
Speaker A
100% means end of the line.
Speaker A
The animation logic is incredibly simple.
Speaker A
We do not need to calculate X and Y coordinates.
Speaker A
We just animate one property.
Speaker A
Go from zero to 100.
Speaker A
The browser handles all the heavy math.
Speaker A
It calculates exactly where the element should be on that curve at every millisecond.
Speaker A
But what if you want the object to follow a more complex path, like an icon shape or a curve?
Speaker A
That's where SVG paths come in.
Speaker A
If it's your first time seeing an SVG path, it might look scary.
Speaker A
But it's just a set of instructions for the browser to draw a vector shape.
Speaker A
And the good part is you don't have to write it yourself, you can export or copy the SVG from tools like Figma or from sites like these.
Speaker A
Once you have the path, you just replace this content-box with the path or do it right inside the SVG like this.
Speaker A
First, we give our path a unique ID.
Speaker A
Then we put a special tag called animateMotion.
Speaker A
Inside that, we use the mpath tag.
Speaker A
This is the link that tells the circle, ignore your own coordinates, find the path named heart-icon and ride it like a roller coaster.
Speaker A
Now doing animation inside SVG is a bit harder than CSS, but it scales very well.
Speaker A
Very handy if you want a bigger size on larger screens.
Speaker A
Another very useful path animation is actually creating or tracing a path.
Speaker A
This time we are going with a different approach.
Speaker A
Imagine a dotted line.
Speaker A
Stroke-dasharray controls how big the dashes and gaps are.
Speaker A
By setting pathLength to one, we are forcing the browser to pretend the entire heart shape is exactly one unit long.
Speaker A
We set the dash and gap size to one.
Speaker A
Essentially, we made a single giant dash that covers the whole shape.
Speaker A
The animation relies on stroke-dashoffset.
Speaker A
This pushes the start of the line forward or backward.
Speaker A
At one, we push the line all the way back so it is hidden.
Speaker A
At zero, we slowly pull it back into view.
Speaker A
This creates the illusion that the ink is flowing out of the pen in real time.
Speaker A
Speaking of flowing, what about this beautiful shimmering effect?
Speaker A
Like colors moving through a tube.
Speaker A
This requires a bit of creative thinking.
Speaker A
Usually, a gradient sits still.
Speaker A
It is like painting a wall.
Speaker A
But here, we are not animating the shape.
Speaker A
We are animating the paint bucket.
Speaker A
First, we define a linear gradient.
Speaker A
This is our paint swatch.
Speaker A
To animate the gradient, we use animateTransform inside the gradient itself.
Speaker A
See that 12, 12 in the rotate code?
Speaker A
That is the center point of our SVG.
Speaker A
Since the view box is 24 by 24.
Speaker A
We are telling the gradient to spin 360 degrees around the center of the icon.
Speaker A
The heart shape acts like a window.
Speaker A
The gradient spins around in the background, but you only see it where the heart lines are.
Speaker A
It looks like the colors are chasing each other around the loop.
Speaker A
SVG is the goat for web animations.
Speaker A
Look at this auth animation.
Speaker A
So many things are happening at the same time.
Speaker A
But there's nothing new here.
Speaker A
We already did the shiny button.
Speaker A
The SVG itself is just a path where we animate the stroke-dashoffset from one to zero.
Speaker A
And for the heart loop, earlier we used SVG animation, but here we're doing the same thing with CSS.
Speaker A
The sliding doors are before and after pseudo elements.
Speaker A
We have set their width to 50% and positioned them left and right side of the container.
Speaker A
But as I said earlier, animation is all about timing.
Speaker A
We have a delay of one second on the doors because we are waiting for three previous animations to finish.
Speaker A
The actual SVG transition is already delayed by 0.3 seconds because of the shine animation.
Speaker A
So we applied a 0.6 second delay on the border-glow animation.
Speaker A
Once the border-glow comes into action, we open the doors by changing the width to zero.
Speaker A
We can do the same animation on input as well.
Speaker A
On failure, we can do a shake animation that can easily be done using translate property.
Speaker A
And on success, we have the exact same animation, but triggered by toggling the success class on the elements.
Speaker A
You can be more creative than this and show some cool animation once you have actually opened the door.
Speaker A
But I wanted to keep this simple, so stopped at the door.
Speaker A
On that note, let's finish this video by covering SVG morphing animation.
Speaker A
This is definitely not simple by any means, but also not so advanced that I cannot explain in a few minutes.
Speaker A
This is the kind of animation that makes people say, how did you do that?
Speaker A
Remember SVG path we talked about earlier, where we did a bunch of interesting animations.
Speaker A
Morphing also involves those paths, but in a different way.
Speaker A
The cat morphing animation is just CSS keyframes, but I chose JavaScript for the card because it gives you more control on when to play the animation.
Speaker A
And makes it simpler to handle the reverse logic as well.
Speaker A
So we have five frames in total, but you can do it with three frames as well.
Speaker A
The starting position, which is a small button, the middle position where it gets wider and grows a neck like a mushroom.
Speaker A
And the final position, which is a big rectangular card.
Speaker A
The beauty of this animation comes from the middle part because that is what gives it an organic feel.
Speaker A
I kept three frames in the middle because it smooths out the effect.
Speaker A
Also, we set the easing to that bouncy cubic-bezier to give it a jelly-like feel.
Speaker A
The text logic is very simple, hide the button text on click and reveal the main text when the animation finishes playing.
Speaker A
Same thing for the reverse animation.
Speaker A
I've added a few animations on the text and the cat as well.
Speaker A
It is simple stuff like scaling and moving stuff on click using transition property we have seen earlier.
Speaker A
Also, for accessibility reasons, you should trigger the animation using a button and not the SVG itself.
Speaker A
But that is not a big deal.
Speaker A
You can have a transparent button that sits right on top of the small SVG and change the background when you have the big card.
Speaker A
The hardest part of the animation is morphing the path.
Speaker A
Because we kept the number of points the same in every frame and just moved their positions.
Speaker A
The browser can smoothly slide the points from the button state to the card state.
Speaker A
But the problem is if you have two different shapes like a cat and a heart, they both will have different points.
Speaker A
So the browser will freak out.
Speaker A
And the end result will look something like this.
Speaker A
To solve this, we are going to use a free and open source tool called shapesifter.design.
Speaker A
Created by this amazing Android developer Alex Lockwood.
Speaker A
I highly recommend watching this video on how he solved this very hard design problem.
Speaker A
His blog also covers this in much better detail than I ever could.
Speaker A
Like see what I meant about same number of points.
Speaker A
Now let's fix our cat animation.
Speaker A
First, take the SVG and paste it here.
Speaker A
Then click on animate this layer and select path data.
Speaker A
Now paste the target path in here.
Speaker A
It will throw a warning that paths are incompatible.
Speaker A
Just click this auto-fix button and copy the new path values.
Speaker A
If you click this edit button, you can clearly see the new orange points it added to match the 17 points from the heart path.
Speaker A
Now you have compatible paths, so you can build whatever you want.
Speaker A
I will leave all the code on my website and the link is in the description.
Speaker A
As always, if you want to see more complex animations, let me know in the comments.
Topics:web animationsCSS animationkeyframestiming functionstransition propertyJavaScript animationsUI animationCSS pseudo elements3D CSS animationcubic-bezier
