Dynamizing your webite with CSS animations
Tags: webdev, design, branding, beginners
Published: 2019-07-22 10:41:27

Recently I took a second crack at CSS animations. The first time I looked into it, it simply looked like a cheap version of what you used to be able to do with flash. However I discovered that you can easily do simple animations that can captivate your audiance.

## Table Of Contents

* [Introduction](#introduction)
* [Logo & Result](#logo-and-result)
* [HTML layout](#html-layout)
* [Building a flame](#building-flame)
* [Building the particle](#building-particle)
* [The flame animation](#animation-flame)
* [The particle animation](#animation-particle)
* [The glow animation](#animation-glow)
* [Conclusion](#conclusion)

## Introduction <a name="introduction"></a>

In this blog we will take a look at creating a simple animation to help dynammise a website. Movement attracts attention and thus CSS animations are perfect for captivating your audiance. 

However remember to not do to many animations, the goal isn't to loose the audiance in this blog we will look at how to make an animated logo to captivate your audiance to look at it.

We will look at the animation I made on one of my temporary landing page. [https://火.dev/](https://火.dev/)

## Logo & Result <a name="logo-and-result"></a>

Here is what the logo looks like:

![Kasai Logo](https://thepracticaldev.s3.amazonaws.com/i/90ac2at0er3zvpfzptfz.png)

Here is what the logo will look like animated

![Kasai animated](https://thepracticaldev.s3.amazonaws.com/i/ir4gt3joc7ncl0p7jmry.gif)

## HTML layout <a name="html-layout"></a>

```html
<div class="fire">
	<div class="fire-left">
		<div class="main-fire"></div>
		<div class="particle-fire"></div>
	</div>
	<div class="fire-main">
		<div class="main-fire"></div>
		<div class="particle-fire"></div>
	</div>
	<div class="fire-right">
		<div class="main-fire"></div>
		<div class="particle-fire"></div>
	</div>
	<div class="fire-bottom">
		<div class="main-fire"></div>
	</div>
</div>
```

We can see here we have four fire components: 

- The left flame
- The middle flame
- The right flame
- The bottom glow

## Building a flame <a name="building-flame"></a>

We will take a look at the middle flame since the left and right are just a smaller version.

Here is the CSS code:

```css
.fire-main {
    position: absolute;
    height: 100%;
    width: 100%;
    animation: scaleUpDown 3s ease-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.fire-main .main-fire {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(farthest-corner at 10px 0, #d43300 0%, #ef5a00 95%);
    transform: scaleX(0.8) rotate(45deg);
    border-radius: 0 40% 60% 40%;
    filter: drop-shadow(0 0 10px #d43322);
}
```

`fire-main` being the parent div we make sure that it uses all the height and width of the parent div. It is also on this dive were we are casting the animation.

We say the animation should play for `3s` and `ease-out` and that it should iterate for `infinite`.

`main-fire` is were we replicate the flame. This is quite simple. Using `border-radius: 0 40% 60% 40%;` we can create a nice tear drop we then finish the orientation and scaling with `transform: scaleX(0.8) rotate(45deg);`

## Building the particle <a name="building-particle"></a>

To make the fire more realistic lets build some small particle that floats up.

```css
.fire-main .particle-fire {
    position: absolute;
    top: 60%;
    left: 45%;
    width: 10px;
    height: 10px;
    background-color: #ef5a00;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px #d43322);
    animation: particleUp 2s ease-out 0;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
```

Since the `width` and `height` have the same value of `10px` coupled with a `border-radius: 50%` it gives us a circle. adding a little `drop-shadow` to be able to really give a sense of depth.

## The flame animation <a name="animation-flame"></a>

The idea of the flam animation is pretty simple. We start off at the normal size we then make the flam grow taller then grow smaller while making it thinner.

```css
@keyframes scaleUpDown {
    0%,
    100% {
        transform: scaleY(1) scaleX(1);
    }
    50%,
    90% {
        transform: scaleY(1.2);
    }
    75% {
        transform: scaleY(0.95);
    }
    80% {
        transform: scaleX(0.55);
    }
}
```

Let's take a look at this by time (percentage of animation completed):

- **0%** the flame is scaled to `(1,1)` (x,y)
- **50%** taller flame scaled to `(1, 1.2)`
- **75%** smaller flame scaled to `(1, 0.95)`
- **80%** thinner flame scaled to `(0.55, 0.95)`
- **90%** taller flame scaled to `(0.55, 1.2)`
- **100%** normal flame scaled to `(1,1)`


## The particle animation <a name="animation-particle"></a>

The particle animation is pretty simple it is a simple going up animation mixed with some opacity changes.

```css
@keyframes particleUp {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        top: -100%;
        transform: scale(0.5);
    }
}
```

Let's take a look at this by time (percentage of animation completed):

- **0%** the flame is invisible `opacity: 0;`
- **20%** the flame is visible `opacity: 1;`
- **80%** the flame is visible `opacity: 1;`
- **100%** the flame moves to top `top: -100%;` and is invisible `opacity: 0;` and smaller `transform: scale(0.5);`

If you are not used to CSS animations you might be wondering why should we have the same line for **20%** and **80%**. WWell te way animations work are per the last change. Hence if I didnt have the **80%** from **20%** to **100%** it would slowly change the opacity to 0. However if we want a faster opacity change and only at the end but saying at **80%** that `opacity: 1;` then it will only become `0` between 80% and 100%


## The glow animation <a name="animation-glow"></a>

The last touch to this flame animation is the glow.
for this we have a very simple div with the following style:

```css
.fire-bottom .main-fire {
    position: absolute;
    top: 30%;
    left: 20%;
    width: 75%;
    height: 75%;
    background-color: #ff7800;
    transform: scaleX(0.8) rotate(45deg);
    border-radius: 0 40% 100% 40%;
    filter: blur(10px);
    animation: glow 2s ease-out 0;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
```

Most of this css is the same as the simple flame we saw above the main difference comes from `filter: blur(10px);` this will give a sligh blur to our flame shape.

Taking a look at the glow animation:

```css
@keyframes glow {
    0%,
    100% {
        background-color: #ef5a00;
    }
    50% {
        background-color: #ff7800;
    }
}
```
we simply see that we change the color from a dark orange to light orange.

## Conclusion <a name="conclusion"></a>

We can see that quite easily and using only HTML and CSS3 that we can really capture user attention to the logo. This can easily help with the branging. this can be used on a very simple login page for instance with either a two panel (logo left, login form right) or a simple logo above the login form.