You may have noticed the number of CSS effect examples available on web pages has increased recently. The effect has created an online splash and is set to become one of today’s important web design trends. All over the web, designers are creating and using CSS animations to bring personality to their websites, explain complex ideas quickly and easily, and guide user actions. .

These animations don’t need to be inflated – even a subtle motion can have a big impact (most still originated in 12 classic Disney effect principles ).

In this article, I’ve gathered a series of CSS animation examples from some of the largest websites around and learn about how to implement these effects yourself. ;;;;;;;

1. Blow bubbles

Code | Review

The CSS bubble effect included in 7UP is a beautiful example of branding through website design animation. Several factors: SVG drawings of bubbles and then two animations applied to each bubble.

The first animation changes the bubble opacity and moves it vertically in the view box; The second creates a wobbly effect for additional realism. Offsetting is handled by targeting each bubble and applying different animation durations and durations.

To create the bubbles I will use SVG. In SVG, I create two layers of bubbles: one for bigger bubbles and one for smaller bubbles. Inside the SVG, locate all the bubbles at the bottom of the view box.

To apply two separate animations to SVG, both using transform properties, we need to apply the animations to separate elements. The <g> element in SVG can be used like a div in HTML; We need to wrap each of our bubbles (already in a group) in a group card.

To create the wobble effect, we just need to move (or translate) the bubble left and right, just in the right amount – too much will make the animation look too hard and disconnected, while too Little will not get much attention. Experimenting is the key when working with animation.

To apply animation to bubbles, I will use the groups I used before and the help of the nth type to identify each bubble group individually. I started by applying the opacity value to the bubbles and the properties will change to use hardware acceleration.

I want to keep all the effect time and delay within seconds of each other and set them to repeat infinitely. Finally, I applied the easy timing function to my animation to make it look a bit more natural.

2. Move the mouse

Code | Review

A subtle scrolling mouse animation can provide direction to the user when they first visit the site. Although this can be done using HTML elements and attributes, we will use SVG because this is more suitable for drawing.

Inside SVG we need a rectangle with rounded corners and a circle for the element we are going to animate, using SVG we can extend the icon to any size they are. I need it.

Now I need to apply some simple styles to control the size and position of the icons in the container. I wrapped a link around the mouse SVG and positioned it at the bottom of the screen.

Next we will create animation. At 0 and 20 percent of the path through the effect, I want to set the state of the element when it starts. By setting it to 20% of the path passed, it will remain for a fraction of the time when repeated infinitely.

We need to add an opacity start point and then convert both the position Y and the vertical scale at 100%, ending our animation. The last thing we need to do is reduce the opacity to fade our circle.

Finally, I applied animation to the circle.

3. Dynamic writing

Code | Review

The Garden Eight website uses a common effect technique, whereby the text appears to be written out. To achieve the effect, I switched to SVG. There are two approaches here: convert text to path to animate or use SVG text. Both approaches have their pros and cons.

4. Flying birds

Code | Review

I started with perfectly straight lines, drawing each frame of my cartoon, depicting birds in different states of the flight. Then I manipulated the vector points and rounded the lines and edges. Finally, I placed each frame into an equal sized box and placed them side by side. Export the file as SVG.

Setting up HTML is really simple, just wrap each bird into a container to apply multiple animations – one to make the bird fly and the other to move it across the screen.

CSS animations have a few tricks you may not know. We can use animation-timing-function to display images in steps – like scrolling through pages in a notebook to refer to animation.

Now that I have created the flight cycle, the bird is currently flapping its wings but is not going anywhere. To move across the screen, I created another keyframe animation. This animation will move the bird on the screen horizontally while also changing the vertical position and proportions to allow the bird to bend more realistic.

5. Menu and close

Code | Review

This animation is used throughout the web, turning three lines into a cross or close symbol. Until recently, most implementations were achieved using HTML elements, but SVG is actually more suited to this type of animation – no longer having to highlight your button code with multiple spans. .

We will rely on converting two properties: opacity and rotation. First of all, we want to blur lines 1 and 4, we can target by using the selector: nth-child.

The only thing left to do is aim for the two middle lines and rotate them 45 degrees in the opposite direction.

6. Chasing circles

Code | Review

Dynamic loading icon is made up of four circles. The circle has no fill, but there are alternating stroke colors.

Next, we need to create the keyframe animation. My effect is simple: rotate the circle 360 ​​degrees. By placing the switch at 50% of the animation, the circle will also return to its original position.

Generate delay using the Sass loop.

Due to the delay, the circle now takes effect, creating an illusion of the circles chasing each other. The only problem with this is that when the page loads for the first time, the circles are static, then they start moving, one by one. We can achieve the same offset effect, but stop unwanted pauses in our animation by simply setting the delay for a negative value.

animation-delay: -#{$i * 0.15}s;

Continue …