This article gives you few exmples of CSS animations example with code which can be helpful for developer and designers to learn css animation, but before we begin to let's understand what is CSS animations.

Table of Contents

What is CSS animations?

css-animation-example-with-code-min.png

CSS animation lets an element gradually change from one style to another.To use CSS animation, you first specify some keyframes for the animation - basically what styles will the element have at certain times. The browser does the tweening for you.

CSS animations are made up of two basic building blocks.

  • Keyframes - define the stages and styles of the animation
  • Animation properties - assign the @keyframes to a specific CSS element and define how it is animated.

Keyframes

Keyframes are the foundation of CSS animations. They define what the animation looks like at each stage of the animation timeline. Each @keyframes is composed of

  • Name of the animation: A name that describes the animation
  • Stages of the animation: Each stage of the animation is represented as a percentage.0% represents the beginning state of the animation. 100% represents the ending state of the animation. Multiple intermediate states can be added in between
  • CSS Properties: The CSS properties defined for each stage of the animation timeline

Animation Properties

Once the @keyframes are defined, the animation properties must be added in order for your animation to function.

Animation properties do two things:

  • They assign the @keyframes to the elements that you want to animate
  • They define how it is animated

You must add the following two animation properties for the animation to take effect:

  • animation-name: The name of the animation, defined in the @keyframes.
  • animation-duration: The duration of the animation, in seconds (e.g., 5s) or milliseconds (e.g., 200ms).

Example:

The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete

Useful css animation code with example

Now we have basic knowledge of CSS animation, we can take a look on few example:

Scrolling Mouse

A subtle 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>

Now we’ve created 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 per cent 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.

We need to add in 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 {
  0%, 20% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(36px) scaleY(2);
            transform: translateY(36px) scaleY(2);
    opacity: 0.01;
  }
}

Lastly 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;
}

Simple CSS text animation

In this example, we will change HTMl text using animation and key-frames, so here is the HTM with defines <div id="flip">, which has three different div and text in it.

<div id=container>
  Make 
  <div id=flip>
    <div><div>wOrK</div></div>
    <div><div>lifeStyle</div></div>
    <div><div>Everything</div></div>
  </div>
  AweSoMe!
</div>

CSS to change text.

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

Complete Demo

Particle animation using CSS

In this example, we will create multiple div with same class name and implement animations on each of the individual class using .scss, take a look at the below HTML/Scss or compiled CSS code carefully.

CSS Animated Ribbon

This is another good and easy example, which shows the animated horizontal ribbon using CSS animations on page load, here is the pen code pen example, you can click on the ribbon to start animation again.

CSS loading Image animation

A beautiful honey comb style loader for your website design. This concept is slick for loading images and pages.

In the above example, we have first aligned the hexagon shaped small area and created a big hexagon, then we are showing/fading this small hexagons infinitely with simple periodic delay using CSS animations.

Rain effect using CSS 3 animation

The only HTML5 element used is the <section> element. Peek through the CSS

html{height:100%;}
body {
background:#0D343A;
background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(#000000)  );
background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);
overflow:hidden;}
.drop {
background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
width:1px;
height:89px;
position: absolute;
bottom:200px;
-webkit-animation: fall .63s linear infinite;
-moz-animation: fall .63s linear infinite;
}
/* animate the drops*/
@-webkit-keyframes fall {
to {margin-top:900px;}
}
@-moz-keyframes fall {
to {margin-top:900px;}
}

The raindrops are gradient forms of drops that are animated to fall within a certain duration, and the directions are specified using the keyframes property.

The JavaScript as shown in the codepen in collaboration of the CSS properties enable the creation of raindrops.

Text Shattering effect

Creating broken shattering text is a simple task with tools like After Effects, but creating a text shatter animation with code is a whole lot tougher, making this pen by Arsen Zbidniakov quite impressive

This effect is made using SVG image which makes the animation process a little easier. This also means you can’t select, copy, or interact with the text like normal.

You can use it in your website project for non-interactive text, like Logo.

Loading Spinner

This codepen example can be used to show loading icon in your web-application project, it is easy to understand and use, take a look.

Bounce effect using CSS 3 animations

No HTML code is used in the below example, this CSS animation example is simple and easy to understand, take a look at the pen code

Hamburger menu to cross

This animation effect is used by lots of website to convert navigation bar into hamburger menu(in small size device like mobile), here is the code-pen for it which uses little bit of JS also.

This animation is used all over the web, turning three lines into a cross or close icon. Until fairly recently, the majority of implementations have been achieved using HTML elements, but actually SVG is much more suited to this kind of animation – there’s no longer a need to bloat your buttons code with multiple spans

We start by creating four elements, be it spans inside of a div or paths inside of an SVG. If we’re using spans, we need to use CSS to position them inside the div; if we’re using SVG, this is already taken care of. We want to position lines 2 and 3 in the centre – one on top of another – while spacing lines 1 and 4 evenly above and below, making sure to centre the transform origin.

We’re going to rely on transitioning two properties: opacity and rotation. First of all, we want to fade out lines 1 and 4, which we can target using the :nth-childselector.

.menu-icon.is-active {element-type}:nth-child(1),
.menu-icon.is-active {element-type}:nth-child(4) {
  opacity: 0; }

The only thing left to do is target the two middle lines and rotate them 45 degrees in opposite directions.

.menu-icon.is-active {element-type}:nth-child(2) {
  transform: rotate(45deg); }
.menu-icon.is-active {element-type}:nth-child(3) {
  transform: rotate(-45deg); }

Pure CSS toggle buttons with animation

You can use these buttons in your form interfaces with these customized and stylish checkboxes, radio buttons, and iOS-style slider switches.

CSS3 Hover animation

One of the most used animation is by adding effects when a div is hovered. Here is an excellent example of this.

That's it for now, there are many more examples available on the internet, but I have used the ones which are helpful and can help you understand CSS3 animations easily.Feel free to comment your favourite animation code.