Make Exciting Websites, Here's How to Animate it Easily!

MURANGWA MAURICE — Thu, 23 Apr 2020 17:28:26 +0000

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.
Let's Get started:

Header

Let's start with writing this Simple HTML from index.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 for free high quality Images. Let's add some styles and animate the image.

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

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

header:after

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

header:before

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.

@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.

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. 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. 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. 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
Twitter: @MorrisMontana0
Linkedin: Maurice Murangwa

Forem: MURANGWA MAURICE

Make Exciting Websites, Here's How to Animate it Easily!

Header

Opacity

Transform

Resources/Libraries