At the beginning of this year I decided that I need to push myself to up my game and learn some new skills.  CSS Animation is one that I have chosen to focus on.  In January, I took a 4 week course from Donovan Hutchinson of CSS Animation.

Here is an animation I created and adapted for Divi.  It is based on a lesson from the course.  I used PNGs but SVG would work as well.  SVG is another thing I want to tackle but one thing at a time.  The media queries could use a bit more work but I think it shows you can run the animation on different devices.

Check out the demo

There are 3 different types of animation happening:  1) The background (sky) is blue while the sun is out and black when it goes away.  2)  The sun rises and sets.  3) The trees grow up from the bottom.

  • The trees that come up from below start out hidden and move up to a set position using keyframes.
  • The sky uses keyframes and background colors to change from blue to black and back to blue again.
  • The sun rotates using a cubic-bezier curve to make it appear to slow down at the top of its cycle.  It also uses keyframes.
  • For both the sky and the sun, the animation-duration is set to take 15s (milliseconds) to complete one cycle. Keeping the timing the same makes the appearance of the sun when the sky is blue work.  Both are using infinite for the animation-iteration-count.

I am including the code that I used in Divi.  Depending on what you use for your images will change a lot of the positioning in the CSS.  You just have to play with it but if you are like me, that is a great way to sharpen your skills.  Try one or more of these with your own images and see what you come up with!   Good luck!

My Codepen  which was inspired by a Codepen by Donovan Hutchinson.

The graphics are from a package I purchased from Design Cuts and created by The Artifex Forge.


Add a section. In the Custom CSS tab, CSS Class add the class mc-header.


Add a row, I made mine Fullwidth, used Custom Gutter Width, and set the Custom Gutter Width to 0.


Add a text module, and place the HTML code below in the text tab.   Change the image URL to one you want to use.

<div class="mc-image-container">
<div class="sky"></div>
<div class="sun"></div>
<img class="mc-image" src="//www.moxiecreek.com/wp-content/uploads/tip/Mountains.png" height="400px" />
<div class="trees"></div>
</div>

 


Add the following CSS to your stylesheet or in Divi > Theme Customizer > Additional CSS.  Be sure to change the image URLs to your own.

NOTE:  You will need to adjust the positions and size to work with your images.

/* animated header css */

body {
  background: #000;
}
.mc-header {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
}

  .mc-image {
    position: absolute;
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%);
}

.mc-image-container {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 26em;
}

.sky {
  animation: background-color 15s cubic-bezier(.81,-0.46,.19,1.33) infinite;
  position: absolute;
  height: 48em;
  width: 100vw;
  top: 0;
}
.sun {
  animation: sun 15s infinite linear;
  position: absolute;
  left: 50%;
  top: 1%;
  background: url(//www.moxiecreek.com/wp-content/uploads/tip/sun.png) no-repeat;
  background-size: 50%;
  height: 50%;
  width: 8%;
  transform-origin: 30% 350%;
}
.trees {
  animation: trees-up 5s linear;
  position: relative;
  left: 40%;
  background: url(//www.moxiecreek.com/wp-content/uploads/tip/trees.png) no-repeat;
  height:100%;
  transform: translatey(79%);
}

@keyframes background-color {
  0% {
   background: #5ab6fc;
  }
  20%, 30% {
    background: #011;
  }
  100% {
    background: #5ab6fc;
  }
}

@keyframes sun {
  0% {
    transform: none;
    animation-timing-function: cubic-bezier(.25,0,.41,1);
  }
  100% {
    transform: rotateZ(-360deg);
    animation-timing-function: linear;
  }
}

@keyframes trees-up {
  0% {
  background-position: 0 100%;
  }
  100% {
  background-position: 0 0;
  }
}

@media only screen and (max-width: 360px) {
    .sun {
    top: 15%;
    background-size: 80%;
    }
    .mc-image {
    bottom: -1%;
    }
    .trees {
    left; 1%;
    background-size: 40%;
    transform: translatey(82%);
    }
}
@media only screen and (max-width: 768px) {
    .sun {
    top: 15%;
    background-size: 80%;
    }
    .mc-image {
    bottom: -1%;
    }
    .trees {
    left; 1%;
    transform: translatey(72%);
    }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .sun {
    top: 15%;
    background-size: 80%;
    }
    .mc-image {
    bottom: -1%;
    }
    .trees {
    left; 30%;
    transform: translatey(68%);
    }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .sun {
    top: 15%;
    background-size: 80%;
    }
    .mc-image {
    bottom: -1%;
    }
    .trees {
    left; 30%;
    transform: translatey(68%);
    }
}

 

 

 

Shares 0