Top 4 CSS animation examples

By Focusoncode May 25, 2018

The numbers of CSS animation examples featuring on websites has been increased. It  has become one of the key web design trends of 2018.Css animation are used to bring personality to the sites, to explain complex ideas quickly and easily. Here is a selection of CSS animation examples .

 

1.Scrolling mouse

View the code   

css animation

A  scrolling mouse animation can give direction to the user when they first land on a website. Although this can be accomplished using HTML elements and properties, we’re going to use SVG as this is more suited to drawing. Inside our SVG we need a rectangle with rounded corners and a circle for the element we’re going to animate, by using SVG we can scale the icon to any size we need.

<svg class="mouse" xmlns="..." viewBox="0 0 76 130" preserveAspectRatio="xMidYmid meet">
<g fill="none" fill-rule="evenodd">
<rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36"/>
<circle cx="36.5" cy="31.5" r="4.5" fill="#FFF"/>
</g>
</svg>

After finishing our SVG, we need to apply some simple styles in order to control the size and position of the icon within our container. We’ve wrapped a link around the mouse SVG and positioned it to the bottom of the screen.

.scroll-link {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
}
.mouse {
max-width: 2.5rem;
width: 100%;
height: auto;
}

Next, we’ll create our animation. At 0 and 20 percent of the way through our animation, we want to set the state of our element as it begins. By setting it to 20% of the way through, it will stay still for part of the time when repeated infinitely.

.scroll-link {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
}
.mouse {
max-width: 2.5rem;
width: 100%;
height: auto;
}

We need to add the opacity start point and then transform both the Y position and the vertical scale at the 100% mark, the end of our animation. The last thing we need to do is drop the opacity in order to fade out our circle.

@keyframes scroll {
...
10% {
opacity: 1;
}
100% {
transform: translateY(36px) scaleY(2);
opacity: 0.01;
}
}

In the end, we apply the animation to the circle, along with the ‘transform-origin’ property and the will-change property to allow hardware acceleration. The animation properties are fairly self-explanatory. The cubic-bezier timing function is used to first pull the circle back before dropping it to the bottom of our mouse shape; this adds a playful feel to the animation.

.scroll {
animation-name: scroll;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
animation-iteration-count: infinite;
transform-origin: 50% 20.5px;
will-change: transform;
}

2.Animated writing

View the path     and   text    

css animation

The Garden Eight website uses a common animation technique whereby text appears to be written out. To achieve the effect, we turn to SVG. To begin with, we’ll create the SVG. There are two approaches here: convert the text to paths in order to animate them or use SVG text. Both approaches have their pros and cons.

Start by creating our keyframe animation. The only function we need it to perform is to change the stroke-dash offset. Now we’ve created our animation, we need to apply the values we want to animate from. We set the stroke-dash array, which will create gaps in the stroke. We want to set our stroke to be a large enough value to cover the entire element, finally offsetting the dash by the length of the stroke.

The magic happens when we apply our animation. By animating the offset, we’re bringing the stroke into view – creating a drawing effect. We want the elements to draw one at a time, with some overlap between the end of drawing one element and beginning to draw the next. To achieve this we turn to Sass/SCSS and nth-of-type to delay each letter by half the length of the animation, multiplied by the position of that particular letter.

3.Mesmerising mandalas

View the code   

css animation

To achieve this we turn to SVG to create our shapes, patterns and masks. Once we have our SVG, we target the masked darker circle with CSS and prepare it for animation.

.masking{

transform:scale(0);

transform-origin:50% 50%;

will-change:transform;

}

Create our keyframe animation. We only need to change two properties here: the opacity and the scale.

@keyframes scale {
0%, 50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}

//Lastly we need to apply the animation to the mask;

.masking {
...
animation: scale 4s linear infinite;
}

4.Moving background

View the code   

css animation

The website A Violent Act uses masking and subtle movement to grab the attention of the user. The majority of the work here is in the setup and creating the SVG.

 

Share This

Leave a Comment

Your email address will not be published.