Make Exciting Websites, Here's How to Animate it Easily!
Tags: html, css, animation, codenewbie
Published: 2020-04-23 17:28:26

Before we start. Animations on websites with great visuals, great staging, and timing make it stand out. It is also good to remember to not overdo animations on your pages. Today, We are going to add some cool animations to different parts of the page. As I learned from this informative [course](https://www.packtpub.com/business-other/level-up-your-css-animation-skills-video).
Let's Get started:

## Header
Let's start with writing this Simple HTML from *index.html*

```html
<html>
  <head>
    <title>Hero Header: Level Up your CSS Animation</title>
    <!-- The default layout, resets and and text styling -->
    <link href="stylesheets/main.css" rel="stylesheet">
    <!-- Custom styling for the header -->
    <link href="stylesheets/header.css" rel="stylesheet">
  </head>
  <body>
    <header>
      <section class="header-content">
        <img class="rocky-dashed animate-pop-in" src="images/rocky-dashed.svg">
        <h1 class="header-title animate-pop-in">Your awesome landing page</h1>
        <h3 class="header-subtitle animate-pop-in">A useful start for your projects</h3>
        <p class="header-button animate-pop-in"><a href="#calls-to-action" class="button">Get started today</a></p>
      </section>
    </header>
  </body>
</html>
```
After Putting together these Html code, You can change **img** Tag source with image of your choice. I recommend that you visit [Unsplash](unsplash.com) for free high quality Images. Let's add some styles and animate the image.

```sass
header {
  align-items: center;
  display: flex;
  font-size: 18px;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  transform-style: preserve-3d;
  perspective: 100px;
}
```
To better Animate anything well on the webpage, we are going to use mostly *Opacity* and *Transform* properties.

## Opacity
According to [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) The **opacity** CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

## Transform
We use Transform property for positioning, scaling, and rotating elements which is great. Because browsers can animate these movements. 

But, If we try to animate the background-position property of our new background-image. You might see junkiness where the animation isn't smooth. so let's find a way to use transform to animate our background image. 
Since the transform property needs to apply to individual Html elements.

We need to add a container element to our page for the background image or we can skip that and Use a pseudo-element.
We use them in CSS to create virtual elements on our page without adding more markup. They can be quite versatile.

Let's Add our first pseudo-element to our Header
```sass
header:after {
  background: #f9fcff;
  content: "";
  height: 40rem;
  left: -5%;
  position: absolute;
  right: -5%;
  top: 90%;
  transform: rotateZ(-4deg);
  transform-origin: 0 0;
  z-index: 0;
}
```
<pre>header:after</pre>
 This is our first pseudo-element that is going to add those styles to our Header. Every pseudo-element needs a *content* property.

So, let's add backgrounds to our Header, we are using multiple backgrounds here, a gradient and an image. we are going to be using another pseudo-element called <pre>header:before</pre>

```sass
header:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)),
    url(../images/background.jpg) no-repeat bottom;
  background-size: cover;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
```
Now, We have done with setting up the pseudo-element, let's animate it by creating animations we start by creating **@keyframes**.

```sass
@keyframes fade-slide-down {
  0% {
    opacity: 0;

    transform: translateY(-4rem);
  }

  100% {
    opacity: 1;

    transform: none;
  }
}
```
Our animation is **fade-slide-down** as we want our image to come from the top and fade in down. So, keyframes always have a starting position which is 0%. An ending position which is 100%. sometimes you can structure your animation to have a mid-action position.

At 0%, which is the start, we want to tell the browser, the background starting position. It needs to be invisible and also positioned a little higher.
We do this using the **transform** property with **translate**.

At 100%, which is the end of the animation. It has a positive one so that we can see it and there's no transform. This gives us both vertical movement and a change in opacity with the keyframes built.

Let's now apply this animation to our pseudo-element.
```sass
header:before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
}
```
We start by writing **animation** property with the name of our keyframes animation. We define the duration, the delay. Timing function which we used a custom one using **cubic-bezier**. The last is the animation fill-mode. It specifies a style for the element when the animation is not playing.

With timing function. It is always experimenting with what's works for you. I encourage you to try different things and always exploring different ways until it looks the way, you want it. This was like scratching the surface. CSS animation is a broad topic that will require you to practice more and do more research about it.

## Resources/Libraries

+ [Animate.css](https://github.com/daneden/animate.css/). This is cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

+ [Animista](http://animista.net/). With this animation you like and it gives you a class name you can use that calls a keyframe animation (you copy and paste both). The point is you just take what you need

+ [CSS Tricks](https://css-tricks.com/). Here, you will find Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.

Thanks Guys, for taking your time and reach this far.
Contact me:
- Github: [@Morrism1](https://github.com/Morrism1)
- Twitter: [@MorrisMontana0](https://twitter.com/MorrisMontana0)
- Linkedin: [Maurice Murangwa](https://www.linkedin.com/in/murangwa-maurice-769549140/)