Tag: #CSSAnimation

Web development

CSS treadmill/ runner animation

Post author By Lena Stanley
Post date March 17, 2022

CSS Running on treadmill — CSS treadmill animation

To learn how to create the CSS treadmill/ runner animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="treadmill-animation">
        <div class="treadmill">
            <div class="base"></div>
            <div class="legs"></div>
            <div class="legs-behind"></div>
          <div class="panel"></div>
        </div>
        <div class="runner">
        <div class="runner-body"></div>
        <div class="right-arm"></div>
        <div class="left-arm"></div>
        <div class="runner-legs">
            <div class="right-leg">
                <div class="right-calf">
                    <div class="right-shoe"></div>
                </div>
            </div>
            <div class="left-leg">
                <div class="left-calf">
                    <div class="left-shoe"></div>
                </div>
            </div>
        </div>
        <div class="runner-face">
            <div class="hair"></div>
            </div>
        </div>
    </div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

  body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: #4b3f72;
    }
    .treadmill-animation {
        position: relative;
        top:-50px;
        left:-50px;
    }

Style and animate the runner:

   .runner {
        position: absolute;
        left:-50px;
        top:7px;
        animation: jump .25s linear infinite;
    }

@keyframes jump {
  0% {transform: translateY(0);}
  50% {transform: translateY(-15px);}
}
    .runner-body {
        position: absolute;
        z-index:5;
        width:50px;
        height: 30px;
        border-radius:0 0 50px 50px;
        background-color: #119da4;
        top:-10px;
        left:-20px;
        transform: rotate(10deg);
    }
    .runner-body:before {
        content:"";
        position: absolute;
        background-color: #1d4e89;
        border-radius: 50px 50px 0 0;
        width:50px;
        height: 80px;
        top:-80px;
    }
    .runner-body:after {
        content:"";
        position: absolute;
        background-color: #e6b8a2;
        width: 25px;
        height: 40px;
        border-radius:30px;
        left:15px;
        top:-107px;
    }

    .right-arm, .left-arm, .right-arm:before, .left-arm:before {
        position: absolute;
        width:20px;
        height: 60px;
        border-radius: 30px;
        transform-origin: top;
    }
    .right-arm, .left-arm {
        top:-75px;
        left:0;
        animation: move .5s linear infinite;
    }
    .right-arm {
        background-color: #edc4b3;
        z-index:7;  
    }
    .left-arm {
        background-color: #deab90;
        z-index:-3;
        animation-delay: .25s;    
    }
    .right-arm:after, .left-arm:after {
        content:"";
        position: absolute;
        border-radius:50%;
        width: 25px;
        height: 25px;
        top:75px;
        left:35px;
      
    }
    .right-arm:before, .right-arm:after {
        background-color: #edc4b3;
    }
    .left-arm:before, .left-arm:after {
        background-color: #deab90;
    }
    .right-arm:before, .left-arm:before {
        content:"";
        top: 45px;
        left:-5px;
        transform: rotate(-45deg);
    }
    
    @keyframes move {
         0%, 100% {transform: rotate(65deg);}
        15% {transform: rotate(55deg);}
        50% {transform: rotate(-35deg);}
        75% {transform: rotate(-45deg);}
    }

.runner-legs {
        position: absolute;
        transform: rotate(20deg);
        z-index:4;
    }
    .right-leg, .left-leg, .right-calf, .left-calf, .right-shoe, .left-shoe {
        position: absolute;
        transform-origin: top;
    }
    .right-leg, .left-leg, .right-calf, .left-calf {
        width:22px;
        height: 70px;
    }
    .right-leg, .left-leg {
        border-radius:0 0 20px 20px;
        animation: run .5s linear infinite;
    }
.right-leg {
        background-color: #edc4b3;
        z-index:5;
        box-shadow: inset 0 40px #119da4;
    }
.left-leg {
        background-color: #deab90;
        box-shadow: inset 0 40px #19647e;
        animation-delay: .25s;
      z-index:2;
    }
.right-calf, .left-calf {
        top:57px;
        animation: calf .5s linear infinite;
        transform: rotate(75deg);
    }
.right-calf {
        background-color: #edc4b3;
    }
    .left-calf {
        background-color: #deab90;
        animation-delay: .25s;
    }
    .right-shoe, .left-shoe {
        width: 50px;
        height: 20px;
        border-radius: 0 30px 0 0;
        overflow: hidden;
        top: 50px;
    }
    .right-shoe {
        background-color: #e6dcd7;
        box-shadow: inset 0 -7px #b8475d;
    }
    .left-shoe {
        background-color: #cdb9ae;
        box-shadow: inset 0 -7px #83203e;
    }
    .right-shoe:before, .left-shoe:before {
        content:"";
        position: absolute;
        background-color: #333;
        height:2px;
        width:10px;
        top:0;
        left:37px;
        box-shadow: -3px -5px #333, -6px -10px #333;
        transform: rotate(-75deg);
    }

    @keyframes run {
        0%, 100% {transform: rotate(-65deg);}
        15% {transform: rotate(-55deg);}
        50% {transform: rotate(35deg);}
        75% {transform: rotate(45deg);}
        
    }
    @keyframes calf {
        0%, 100% {transform: rotate(75deg);}
        15% {transform: rotate(0deg);}
        50% {transform: rotate(0);}
        75% {transform: rotate(55deg);}
    }
    
    .runner-face {
        position: absolute;
        background-color: #edc4b3;
        z-index:8;
        width:45px;
        height:50px;
        top:-145px;
        left:12px;
        border-radius:0 0 20px 5px;
        transform: rotate(5deg);
    }
    
    .runner-face:before, .runner-face:after {
        content:"";
        position: absolute;
        border-radius:50%;
    }
    .runner-face:before {
        width:5px;
        height:10px;
        top:15px;
        left:25px;
        background-color: #333;
        box-shadow: 10px 0 #333;
    }
    .runner-face:after {
        width:10px;
        height:10px;
        left:27px;
        top:30px;
        background-color: #c38e70;
        animation: scale .25s linear infinite;
    }
    @keyframes scale {
        0%,100% {transform: scale(1);}
        50% {transform: scale(.7);}
    }
    .hair {
        position: absolute;
        z-index:5;
        background-color: #774936;
        width: 57px;
        height:17px;
        border-radius: 10px 0 20px 0;
        top:-5px;
        left:-2px;
    }
    .hair:before, .hair:after {
        content:"";
        position: absolute;
    }
    .hair:before {
        background-color: #774936;
        width:12px;
        height:20px;
        border-radius:0 0 15px 0;
        top:15px;
    }

Style and animate the treadmill:

   .treadmill {
        position: relative;
    }
    
    .base {
        position: absolute;
        overflow: hidden;
        width: 500px;
        height: 50px;
        border-radius: 50px;
        background-color: #6c757d;
        top:135px;
        left:-200px;
        border: 5px solid #333;
    }
    
    .base:before {
        content:"";
        position: absolute;
        width: 500px;
        height:5px;
        top:70px;
        background-color: #333;
        box-shadow: 0 0 #333, 0 -7px #333, 0 -14px #333, 0 -21px #333, 0 -28px #333, 0 -35px #333, 0 -42px #333, 0 -49px #333,0 -56px #333, 0 -63px #333, 0 -70px #333, 0 -77px #333, 0 -84px #333, 0 -91px #333, 0 -98px #333, 0 -105px #333;
        animation: mill .25s linear infinite;
    }
    .base:after {
        content:"";
        position: absolute;
        border: 5px solid #333;
        top:-5px;
        left:-5px;
        width:380px;
        height:50px;
        background-color: #343a40;
        border-radius: 50px;
    }
    
@keyframes mill {
  0% {transform: translateY(0);}
  100% {transform: translateY(35px);}
}

.legs, .legs:before, .legs-behind:before, .legs-behind:after {
  position: absolute;
  width:25px;
}

.legs, .legs-behind:before {
   height:180px;
   transform: skew(15deg);
}
    
.legs {
   background-color: #212529;
   top:25px;
   z-index:7;
   left:115px;
}

.legs:before, .legs-behind:after {
  height:10px;
}
    
.legs:before {
        content:"";
        background-color: #212529;
        left:-280px;
        top:170px;
    }

.legs-behind {
  position: absolute;
  width:500px;
  height:50px;
  background-color: rgba(0,0,0,.2);
  border-radius:50%;
  top:170px;
  z-index:-4;
  left:-200px;
}

.legs-behind:before {
  content:"";
  background-color: #adb5bd;
  top:-150px;
  left:400px;
}

.legs-behind:after {
        content:"";
        background-color: #adb5bd;
        left:120px;
        transform: skew(15deg);
        top:20px;
    }

.panel {
  position: absolute;
  width: 200px;
  height: 25px;
  background-color: #adb5bd;
  z-index:8;
  border-radius:30px;
  left:40px;
  box-shadow: inset -100px 0 #6c757d;
}

.panel:before, .panel:after {
  content:"";
  position: absolute;
}

.panel:before {
  width: 60px;
  height:25px;
  background-color: #343a40;
  top:-25px;
  left:90px;
  border-radius:0 25px 0 0;
}

.panel:after {
  border-style: solid;
  border-width: 30px 0 25px 30px;
  border-color: transparent transparent #343a40 transparent;
  height:0;
  width:0;
  top:-55px;
  left:60px;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Cyclist /Bike Animation

CSS Car Animation

CSS Paper Plane Animation

Tags #CSSAnimation, CSS, HTML, treadmill

Web development

CSS Halloween Animation on Hover: Dracula/ Vampire

Post author By Lena Stanley
Post date October 8, 2021

To learn how to create the CSS Halloween Animation: Dracula/ Vampire follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

Create the Vampire:

<div class="halloween">
  <div class="dracula">
    <div class="head">
      <div class="sides"></div>
      <div class="teeth"></div>
      <div class="eyes"></div>
      <div class="eyelids"></div>
    </div>
    <div class="ears"></div>
    <div class="collar"></div>
    <div class="arms"></div>
    <div class="text">Happy Halloween!</div>
  </div>
</div>

Step2.

Add CSS

Import the font (source: https://fonts.google.com/):

@import url('https://fonts.googleapis.com/css2?family=Freckle+Face&display=swap');

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #542f63;
  overflow: hidden;
}

.halloween {
  position: relative;
}

.dracula {
  position: relative;
  cursor: pointer;
  top:-50px;
}

Style the vampire:

.head {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-color: black;
  box-shadow: inset 20px -20px #c7c2e0;
  z-index:3;
}

.head:before, .head:after {
  content:"";
  position: absolute;
  background-color: #c7c2e0;
  width:110px;
  height:110px;
  border-radius:50%;
}

.head:before {
  left:-55px;
}

.head:after {
  left:45px;
}

.sides {
  background-color: black;
  border-radius:50%;
  position: absolute;
  width:50px;
  height:50px;
  left:-20px;
  top:-20px;
  box-shadow: 90px 0px black;
  z-index:3;
}

.sides:before {
  content:"";
  position: absolute;
  background-color: black;
  width: 35px;
  height:5px;
  top:90px;
  left:50px;
}

.sides:after {
  content:"";
  position: absolute;
  width:5px;
  height:20px;
  background-color: #f11828;
  top:95px;
  left:78px;
  border-radius:0 0 10px 10px;
  animation: drip 3s linear infinite;
}

@keyframes drip {
  0% {height:20px;}
  10% {height:20px;}
  30% {height:30px;}
  50% {height:25px;}
  70% {height:20px;}
  85% {height:10px;}
  100% {height:20px;}
}

.teeth, .teeth:before {
  position: absolute;
  width:0;
  height:0;
  border-bottom: 10px solid transparent;
}

.teeth {
  border-right: 10px solid black;
  top:73px;
  left:30px;
  z-index:4;
}

.teeth:before {
  content:"";
  border-left: 10px solid black;
  left:25px;
}

.eyes {
  position: absolute;
  border-radius:50%;
  width:33px;
  height: 33px;
  background-color: white;
  top:32px;
  left:18.5px;
  z-index:2;
  box-shadow: 30px 0 white;
}

.eyes:before, .eyes:after {
  content:"";
  position: absolute;
  border-radius:50%;
}

.eyes:before {
  background-color: #ed439d;
  width:25px;
  height:25px;
  top:5px;
  left:7px;
  box-shadow:25px 0 #ed439d;
}

.eyes:after {
  background-color: #7d203a;
  width:15px;
  height:15px;
  top:10px;
  left:13px;
  box-shadow: 24px 0 #7d203a;
}

.eyelids {
  position: absolute;
  background-color: black;
  width: 25px;
  height: 10px;
  border-radius: 100px 100px 0 0;
  top:30px;
  left:27px;
  transform: rotate(20deg);
  z-index:4;
}

.eyelids:before {
  content:"";
  position: absolute;
  background-color: black;
  width: 25px;
  height: 10px;
  border-radius: 100px 100px 0 0;
  transform: rotate(-40deg);
  left:20px;
  top:-7px;
}

.ears {
  position: absolute;
  background-color: #9e8dc3;
  width:50px;
  height: 25px;
  border-radius: 0 0 100px 100px;
  top:40px;
  left:-30px;
  transform: rotate(40deg);
  z-index:2;
}

.ears:before {
  content:"";
  position: absolute;
  background-color: #9e8dc3;
  width:50px;
  height: 25px;
  border-radius: 0 0 100px 100px;
  transform: rotate(-80deg);
  left:83px;
  top:-70px;
}

.collar {
  position: absolute;
  background-color: black;
  width: 150px;
  height: 75px;
  border-radius: 0 0 100px 100px;
  top:55px;
  left:-25px;
  z-index:1;
}

.collar:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 30px solid #1a0e36;
  left:55px;
  top:40px;
}

.collar:before {
  content:"";
  position: absolute;
  width:80px;
  height:0;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  border-bottom: 180px solid black;
  top:30px;
  left:10px;
}

.arms {
  position: absolute;
  width:100px;
  height:0;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  border-bottom: 155px solid #1a0e36;
  left:-25px;
  transition: .2s;
}

Style the text:

.text {
  position: absolute;
  z-index:5;
  text-align: center;
  font-family: 'Freckle Face', cursive;
  font-size: 50px;
  color: #f11828;
  top:120px;
  left:-50px;
  opacity:0;
  transition: .2s;
}

Animate elements (cloak and text) on Hover:

.dracula:hover .arms {
  transform: scaleX(2);
}
.dracula:hover .text {
  opacity:1;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Halloween Ghost Animation

CSS Spooky House Animation

CSS Scarecrow

Tags #CSSAnimation, CSS, Dracula, halloween, hover, Vampire

Web development

CSS Falling Autumn Leaves

Post author By Lena Stanley
Post date August 31, 2021

To create the CSS Falling Autumn Leaves animation follow the steps below and watch the video tutorial:

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

Create the container and add the text and the leaf emoji (in this tutorial I used emoji from: emojipedia.org):

<div class="content">
<div class="hello">Hello</br>Autumn!</div>
<div class="leaves">
  <div class="leaf1">🍁</div>
  <div class="leaf2">🍁</div>
  <div class="leaf3">🍁</div>
  <div class="leaf4">🍁</div>
  <div class="leaf6">🍁</div>
  <div class="leaf7">🍁</div>
  <div class="leaf8">🍁</div>
  <div class="leaf9">🍁</div>
  <div class="leaf10">🍁</div>
  <div class="leaf11">🍁</div>
</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  background-color: #fcecd7;
  height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;
  overflow: hidden;
}

.content {
  position: relative;
}

Style the text:

.hello {
  text-align: center;
  font-size:80px;
  font-weight: bold;
  font-family: tahoma;
  color: #6a040f;
  text-shadow: 1px 1px #370617;
}

Add some leaves:

.leaves {
  position: absolute;
}

.leaf1 {
  position: absolute;
  font-size: 70px;
  top:0;
  animation: fall 5s linear infinite;
}

.leaf2 {
  position: absolute;
  font-size: 55px;
  top:0;
  animation: fall2 6s linear infinite;
}

.leaf3 {
  position: absolute;
  font-size: 40px;
  top:-400px;
  left:-100px;
  animation: fall 4s linear infinite 1s;
}

.leaf4 {
  position: absolute;
  font-size: 45px;
  top:-400px;
  left:300px;
  animation: fall2 4s linear infinite 1.5s;
}

.leaf5 {
  position: absolute;
  font-size: 55px;
  top:-410px;
  left:250px;
  animation: fall3 4s linear infinite 2s;
}
.leaf6 {
  position: absolute;
  font-size: 55px;
  top:-410px;
  left:-250px;
  animation: fall3 4s linear infinite 1.5s;
}

.leaf7 {
  position: absolute;
  font-size: 35px;
  top:-410px;
  left:-350px;
  animation: fall2 5s linear infinite .5s;
}

.leaf8 {
  position: absolute;
  font-size: 75px;
  top:-430px;
  left:550px;
  animation: fall3 5s linear infinite .5s;
}

.leaf9 {
  position: absolute;
  font-size: 35px;
  top:-430px;
  left:150px;
  animation: fall4 6s linear infinite .3s;
}

.leaf10 {
  position: absolute;
  font-size: 55px;
  top:-430px;
  left:450px;
  animation: fall5 3.7s linear infinite 1.3s;
}

.leaf11 {
  position: absolute;
  font-size: 55px;
  top:-430px;
  left:650px;
  animation: fall5 4.7s linear infinite 1.7s;
}

Add CSS @keyframes to animate leaves:

@keyframes fall {
  0% {top:-410px; transform: translateX(-100px) rotateX(180deg);}
  100% {top:400px; transform: translateX(250px) rotateX(-180deg);}
}

@keyframes fall2 {
  0% {top:-410px; transform: translateX(50px) rotateX(-90deg);}
  100% {top:400px; transform: translateX(-350px) rotateX(180deg);}
}

@keyframes fall3 {
  0% {top:-430px; transform: translateX(0px) rotateX(-180deg);}
  100% {top:400px; transform: translateX(-400px) rotateX(180deg);}
}

@keyframes fall4 {
  0% {top:-430px; transform: translateX(0px) rotateY(-180deg);}
  100% {top:400px; transform: translateX(-400px) rotateY(180deg);}
}

@keyframes fall5 {
  0% {top:-410px; transform: translateX(-100px) rotateY(180deg);}
  100% {top:400px; transform: translateX(250px) rotateY(-180deg);}
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Snowfall

CSS Paper Plane Animation

CSS Cyclist /Bike Animation

Tags #CSSAnimation, Autumn, CSS, fall, Leaves Animation

Web development

CSS @keyframes Rule

Post author By Lena Stanley
Post date August 16, 2021

The CSS @keyframes rule defines the animation code. The CSS animation is created step by step by changing from one set of CSS styles to another.

Define when the style change will happen in percent, or with the keywords “from”/ “to” (that is the same as 0% and 100%). 0% is the starting the animation, 100% is when the animation is ending.

Syntax:

@keyframes name {keyframes-selector {css-styles;}}

name – specifies the name of the animation.

keyframes-selector – percentage of the animation duration (0%-100%, or “form”/ “to”).

css-styles – one or more CSS style properties.

Example1:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  animation: move 5s infinite;
}

@keyframes move {
  0%   {left: 0px; background-color: #2a9d8f;}
  25%  {left: 100px; background-color: #264653;}
  50%  {left: 0px; background-color: #e76f51;}
  75%  {left: 100px; background-color: #f4a261;}
  100% {left: 0px; background-color: #e9c46a;}
}
</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:

Example2:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  position: relative;
  animation: rotate 5s infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:

Enjoy coding!

Read also:

Introduction to CSS Animation

CSS Transition VS. CSS Animation

CSS Reference

Tags #CSSAnimation, @keyframes, CSS

Web development

CSS Steaming Coffee

Post author By Lena Stanley
Post date May 29, 2021

Demo:

*to see the CSS Steaming Coffee Animation on the website click here.

To create the CSS Steaming Coffee Animation follow the steps below:

Add HTML
Add CSS

Step1.

Add HTML

<div class="steaming-coffee">
  <div class="cup"></div>
<div class="test">
<div class="steam">
  <div class="one"></div>
  <div class="two"></div>
  </div>
  <div class="steam-2">
  <div class="one"></div>
  <div class="two"></div>
  </div>
    <div class="steam-3">
  <div class="one"></div>
  <div class="two"></div>
  </div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #0a9396;
}

.steaming-coffee {
  position: relative;
}

Style the coffee cup:

.cup {
  position: relative;
  width:200px;
  height: 150px;
  background-color: #e9d8a6;
  top:120px;
  left:-30px;
  border-radius: 0 0 20px 20px;
}

.cup:before {
  content:"";
  position: absolute;
  width:60px;
  height:60px;
  border: 20px solid #e9d8a6;
  border-radius:50%;
  left:-65px;
  top:25px;
}

.cup:after {
  content:"";
  position: absolute;
  background-color: #fff;
  height:15px;
  width:350px;
  border-radius:20px;
  top:160px;
  left:-80px;
}

Add the steam:

.test {
  position: relative;
  width:200px;
  height: 100px;
  overflow: hidden;
  opacity:0.5;
  top:-150px;
}

.steam {
  position: absolute;
  top:100px;
  animation: steam 1s linear infinite;
}

.steam-2 {
  position: absolute;
  top:100px;
  left:50px;
  animation: steam 1s linear infinite;
}

.steam-3 {
  position: absolute;
  top:100px;
  left:100px;
  animation: steam 1s linear infinite;
}

.one {
  position: absolute;
}

.two {
  position: absolute;
}

.steam:before, .one:before, .two:before, .steam-2:before, .steam-3:before {
  content:"";
  position: absolute;
  border-left: 7px solid white;
  border-top: 7px solid white;
  width:30px;
  height: 30px;
  border-top-left-radius:100%;
  transform: rotate(-40deg);
}

.one:before {
  top:-93px;
  left:0;
}

.two:before {
  top:-185px;
  left:1.2px;
}

.steam:after, .one:after, .two:after, .steam-2:after, .steam-3:after {
  content:"";
  position: absolute;
  border-right: 7px solid white;
  border-top: 7px solid white;
  width:30px;
  height: 30px;
  border-top-right-radius:100%;
  transform: rotate(40deg);
}

.steam:after {
  top:-46.5px;
  left:4px;
}

.one:after {
  top: -139.5px;
  left:4px;
}

.two:after {
  top:-231px;
  left:4.7px;
}

.steam-2:after {
  top:-46.5px;
  left:4.5px;
}

.steam-3:after {
  top:-46.5px;
  left:4.5px;
}

Animate the steam:

@keyframes steam {
  0% {transform: translateY(100px);}
  100% {transform: translateY(7px);}
}

Enjoy coding!

Read also:

CSS Coffee Cup

CSS Coffee Express Animation

CSS Coffee To Go

Tags #CSSAnimation, coffee, CSS

Web development

CSS Bouncing Text Animation

Post author By Lena Stanley
Post date May 18, 2021

Demo:

*to see the animation on the website click here.

To create the CSS Bouncing Text Effect follow the steps below and watch the video tutorial.

Add HTML
Add CSS

Step1.

Add HTML

<div class="bouncing-text">
  <div class="b">B</div>
  <div class="o">O</div>
  <div class="u">U</div>
  <div class="n">N</div>
  <div class="c">C</div>
  <div class="e">E</div>
  <div class="shadow"></div>
  <div class="shadow-two"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  height: 100vh;
  align-items: center;
  justify-content:center;
  display: flex;
}

.bouncing-text {
  position: relative;
  display: flex;
  font-size: 70px;
  font-family: arial black;  
}

Style the letters:

.b, .o, .u, .n, .c, .e {
  color: #4cc9f0;
  text-shadow: 0 3px #4361ee, 0 5px #4361ee, 0 7px #4361ee;
}

Add the bounce effect animation:

 @keyframes bounce {
        0%   { transform: scale(1,1) translateY(0); }
        10%  { transform: scale(1.1,.9) translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-55px);}
        50%  { transform: scale(1.05,.95) translateY(0); }
        58%  { transform: scale(1,1) translateY(-7px); }
        65%  { transform: scale(1,1) translateY(0);}
        100% { transform: scale(1,1) translateY(0);}
    }

.b {
  animation: bounce 1s ease infinite;
}

.o {
  animation: bounce 1s ease infinite .1s;
}

.u {
  animation: bounce 1s ease infinite .2s;
}

.n {
  animation: bounce 1s ease infinite .3s;
}

.c {
  animation: bounce 1s ease infinite .4s;
}

.e {
  animation: bounce 1s ease infinite .5s;
}

Add the shadow:

.bouncing-text:before, .bouncing-text:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.4);
  width: 50px;
  height:5px;
  border-radius:50%;
  top:82px;
  z-index:-1;
}

.shadow, .shadow-two {
  position: absolute;
  top:82px;
  z-index:-1;
}

.shadow:before, .shadow:after, .shadow-two:before, .shadow-two:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.4);
  width: 50px;
  height:5px;
  border-radius:50%;
  top:0;  
}

.bouncing-text:before {
  left:0;
  animation: scale 1s linear infinite;
}

@keyframes scale {
  0% {transform: scaleX(1);}
  25% {transform: scaleX(0.4);}
  50% {transform: scaleX(1);}
  75% {transform: scaleX(0.9);}
  100% {transform: scaleX(1);}
}

.bouncing-text:after {
  left: 57px;
  animation: scale 1s linear infinite .1s;
}

.shadow:before {
  left: 116px;
  animation: scale 1s linear infinite .2s;
}

.shadow:after {
  left:175px;
  animation: scale 1s linear infinite .3s;
}

.shadow-two:before {
  left:232px;
  animation: scale 1s linear infinite .4s;
}

.shadow-two:after {
  left: 285px;
  animation: scale 1s linear infinite .5s;
}

Watch also the video tutorial:

Enjoy coding!

CSS Mirror/ Reflection Text Effect

CSS Sliced Text Effect

Tags #CSSAnimation, Bounce, CSS

Web development

CSS Cyclist /Bike Animation

Post author By Lena Stanley
Post date May 18, 2021

CSS Bike Animation — CSS Cyclist /Bike Animation

Demo:

*to see the animation on the website click here.

To create the CSS Cyclist/ Bike Animation follow the steps below:

Add HTML
Add CSS

Step1.

Add HTML

<div class="bike-riding">
  <div class="clouds"></div>
  <div class="shadow"></div>
<div class="cyclist">
  <div class="bike">
    <div class="leftTyre">
      <div class="spokes"></div>
    </div>
    <div class="rightTyre">
      <div class="spokes"></div>
    </div>
    <div class="wheel"></div>
    <div class="pedals"></div>
    <div class="chain"></div>
  </div>
  <div class="girl">
    <div class="top"></div>
    <div class="rightArm"></div>
    <div class="leftArm"></div>
    <div class="head"></div>
    <div class="hair"></div>
    <div class="strap"></div>
  <div class="trousers">
      <div class="leftLeg">
        <div class="leftcalf"></div>
      </div>
      <div class="rightLeg">
        <div class="calf"></div>
      </div>
    </div>
    </div> 
</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  
  overflow: hidden;
}

.bike-riding {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 600px;
  overflow: hidden;
  background-color: #94d2bd;
}

.cyclist {
  position: relative;
  animation: ride 1s linear infinite;
  top:20px;
}

Style the bike:

.bike {
  position: relative;
  background-color: #e5383b;
  width:180px;
  height: 10px;
  border-radius:10px;
  box-shadow: inset 3px -3px rgba(0,0,0,0.1);
}

.bike:before, .bike:after {
  content:"";
  position: absolute;
  background-color: #e5383b;
  width:8px;
  height: 140px;
  top:-10px;
}

.bike:before {
  transform: rotate(35deg);
  left:126px;
  box-shadow: -120px 85px #e5383b, 0px -30px #e5383b;
}

.bike:after {
  transform: rotate(-35deg);
  left:49px;
  box-shadow: 120px 85px #e5383b, 0px -30px #e5383b;
}

.leftTyre, .rightTyre {
  width:150px;
  height:150px;
  position: absolute;
  border: 10px solid #333;
  border-radius:50%;
  z-index:1;
  top:30px;
  animation: spin 1s linear infinite;
}

.leftTyre {
  left:-140px;
}

.rightTyre {
  left:155px;
}

.leftTyre:before, .rightTyre:before {
  content:"";
  position: absolute;
  width:135px;
  height:135px;
  border-radius:50%;
  border: 8px solid #fcfffc;
}

.leftTyre:after, .rightTyre:after {
  content:"";
  position: absolute;
  width:2px;
  height: 145px;
  left:75px;
  top:0;
  background-color: #fcfffc;
}

.spokes {
  position: absolute;
  width:145px;
  height: 2px;
  background-color: #fcfffc;
  top:75px;
}

.spokes:before, .spokes:after {
  content:"";
  position: absolute;
   width:145px;
  height: 2px;
  background-color: #fcfffc;  
  left:3px;
}

.spokes:before {
  transform: rotate(45deg);
}

.spokes:after {
  transform: rotate(-45deg);
}

.wheel {
  z-index:6;
  position: absolute;
  border-radius:50%;
  background-color: #a4161a;
  width:20px;
  height:20px;
  top:105px;
  left:-65px;
  box-shadow: 295px 0 #a4161a, 146px 0px #a4161a;
}

.wheel:before {
  content:"";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius:100%;
  border-top: 11px solid #333;
  border-left: 8px solid #e5383b;
  border-bottom: 8px solid transparent;
  border-right: 8px solid transparent;
  transform: rotate(80deg);
  top:-140px;
  left:240.2px;
}

.shadow {
  position: absolute;
  width:520px;
  height:15px;
  background-color: rgba(0,0,0,0.2);
  top:510px;
  left:45px;
  border-radius:10px;
  animation: scale 2s linear infinite;
}

Animate the wheels and the shadow:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes scale {
  0% {transform: scaleX(1);}
  25% {transform: scaleX(0.9);}
  50% {transform: scaleX(1);}
  75% {transform: scaleX(0.9);}
  100% {transform: scaleX(1);}
}

Add pedals and the chain:

.pedals {
  position: relative;
  z-index:7;
  width:50px;
  height:50px;
  border: 5px solid #ba181b; 
  border-radius:50%;
  top:85px;
  left:60px;
  animation: spin 1s linear infinite; 
}

.pedals:before {
  content:"";
  position: absolute;
  border-radius: 10px;
  background-color: #adb5bd;
  height: 30px;
  width:5px;
  left:22px;
  top:-5px;
}

.chain {
  position: absolute;
  top:81px;
}

.chain:before, .chain:after {
  content:"";
  position: absolute;
  background-color: #333;
  width:140px;
  height:2px;
  left:-60px;
}

.chain:before {
  top:20px;
  transform: rotate(-10deg);
}

.chain:after {
  top:47px;
  transform: rotate(10deg);
}

Style the cyclist:

.girl {
  position: absolute;
}

.top {
  position: absolute;
  width:80px;
  height: 80px;
  border-top: 50px solid #e9d8a6;
  border-left: 50px solid #e9d8a6;
  border-top-left-radius:100%;
  top:-190px;
  left:-18px;
}

.top:before {
  content:"";
  position: absolute;
  width:50px;
  height: 50px;
  border-radius:50%;
  background-color: #e9d8a6;
  left:50px;
  top:-50px;
  box-shadow: -10px 10px#e9d8a6;
}

.rightArm, .leftArm {
  position: absolute;
  width:15px;
  height: 100px;
  border-radius:20px;
  transform: rotate(-30deg);
}

.rightArm {
  background-color: #deab90;
  left:130px;
  top:-175px;
  z-index:8;
}

.leftArm {
  background-color: #cd9777;
  left:105px;
  top:-185px;
  z-index:-1;
}

.rightArm:before, .leftArm:before {
  content:"";
  position: absolute;
  width:15px;
  height: 100px;
  border-radius:20px;
  top:85px;
  left:15px;
  transform: rotate(-20deg);
}

.rightArm:before {
  background-color: #deab90;
}

.leftArm:before {
  background-color: #cd9777;
}

.head {
  position: absolute;
  background-color: #cd9777;
  width: 40px;
  height:20px;
  top:-190px;
  left:110px;
  z-index:-1;
  transform: rotate(-20deg);
}

.head:before, .head:after {
  content:"";
  position: absolute;
  background-color: #deab90;
  border-radius: 50%;
}

.head:before {
  width: 75px;
  height: 75px;
  left:30px;
  top:-30px;
}

.head:after {
  width:20px;
  height:20px;
  left:78px;
  top:25px;
}

.hair {
  position: absolute;
  width: 80px;
  height:40px;
  border-radius:0 100% 0 0;
  background-color: #bb3e03;
  top:-245px;
  left:142px; 
  z-index:10;
}

.hair:after {
  content:"";
  position: absolute;
  height:40px;
  width:40px;
  border-radius:50%;
  background-color: #bb3e03;
  left:-20px;
}

.hair:before {
  content:"";
  position: absolute;
  width: 80px;
  height:25px;
  border-radius:50% 0/100% 0;
  background-color: #ee9b00;
  transform-origin: right;
  left:-84px;
  top:37px;
  animation: hair 1s linear infinite;
}

@keyframes hair {
  0% {transform: rotate(0);}
  25% {transform: rotate(10deg);}
  50% {transform: rotate(0);}
  75% {transform: rotate(10deg);}
  100% {transform: rotate(0);}
}

.strap {
  position: absolute;
  background-color: #333;
  width:7px;
  height:7px;
  border-radius:50%;
  top:-197px;
  left:197px;
}

.strap:after {
  content:"";
  position: absolute;
  background-color: #333;
  width:7px;
  height:60px;
  border-radius:10px;
  transform: rotate(-15deg);
  top:-22px;
  left:-30px;
}

.strap:before {
  content:"";
  position: absolute;
  background-color: #ee9b00;
  width:60px;
  height:30px;
  border-radius: 50px 50px 50px 0;
  left:-60px;
  top:-30px;
}

Add and animate the legs:

.trousers {
  position: absolute;
  top:-90px;
  left:-20px;
}

.rightLeg {
  position: absolute;
  background-color: #0a9396;
  width: 120px;
  height:37px;
  top:17px;
  left:12px;
  border-radius: 0 10px 0 30px;
  transform-origin: top left;
  z-index:7;
  animation: rotate 1s linear infinite;
}

.trousers:after {
  content:"";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 0 25px 50px 50px;
  left:-5px;
  background-color: #0a9396;
  transform: rotate(20deg);  
}

.trousers:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:65px;
  height:25px;
  border-radius: 20px;
  left:-10px;
  top:50px;
}

.leftLeg {
  position: absolute;
  background-color: #005f73;
  width: 120px;
  height:37px;
  top:14px;
  left:13px;
  border-radius: 0 10px 0 30px;
  transform-origin: top left;
  z-index:-4;
  animation: rotate 1s linear infinite;
  animation-delay: .5s;
}

@keyframes rotate {
 0% {transform: rotate(0);}
  25% {transform: rotate(15deg);}
  55% {transform: rotate(30deg);}
  80% {transform: rotate(15deg);}
  100% {transform: rotate(0);}
}

.calf {
  position: absolute;
  transform-origin: top;
  width:33px;
  height: 120px;
  background-color: #0a9396;
  left:87px;
  top:9px;
  border-radius: 0 10px 0 0;
  animation: cycle 1s linear infinite;
}

.leftcalf {
  position: absolute;
  transform-origin: top;
  width:33px;
  height: 120px;
  background-color: #005f73;
  left:87px;
  top:9px;
  border-radius: 0 10px 0 0;
  animation: cycle 1s linear infinite;
  animation-delay: .5s;
}

.leftcalf:before, .calf:before {
  content:"";
  position: absolute;
  background-color: #bb3e03;
  width:55px;
  height: 30px;
  border-radius:0 20px 0 0;
  top:119px;
  box-shadow: inset 0 -10px #fff;
}

.leftcalf:after, .calf:after {
  content:"";
  position: absolute;
  background-color: #333;
  width:35px;
  height:10px;
  border-radius:10px;
  top:150px;
  left:10px;
}

@keyframes cycle {
 0% {transform: rotate(0);}
 25% {transform: rotate(-27deg);}
 50% {transform: rotate(-32deg);}
 75% {transform: rotate(-10deg);}
 100% {transform: rotate(0);}
}

Add some clouds:

.clouds {
  position: absolute;
  width:130px;
  height:30px;
  border-radius:20px;
  background-color: rgba(255,255,255,0.5);
  top:250px;
  animation: clouds 2.7s linear infinite reverse;
}

.clouds:before, .clouds:after {
  content:"";
  position: absolute;
  width:130px;
  height:30px;
  border-radius:20px;
  background-color: rgba(255,255,255,0.5);
}

.clouds:before {
  left:-300px;
  top:-200px;
  animation: clouds 2.2s linear infinite reverse;
}

.clouds:after {
  left: 350px;
  top:-100px;
  animation: clouds 3.1s linear infinite reverse;
}

@keyframes clouds {  
  from{ 
    left:-600px; 
  }
  to{ 
    left: 600px; 
  }
}

Enjoy coding!

Read also:

CSS Car Animation

Pure CSS Train Animation

CSS Windmill Animation

Tags #CSSAnimation, bike, CSS, cyclist

Web development

CSS Slide Text Animation/ Sliding Text Effect

Post author By Lena Stanley
Post date May 15, 2021

CSS Sliding Text Effect — CSS Sliding Text Animation

Demo:

*to see the CSS Slide Text Animation on the website click here.

To create the CSS Slide Text Animation follow the steps below and watch the video tutorial:

Add HTML
Add CSS

Step1.

Add HTML

<div class="slide-effect">
  <div class="text">CSS Slide Effect:</div>
  <div class="slideDown">Slide Down,</div>
  <div class="slideUp">Slide Up</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  height: 100vh;
  align-items: center;
  display: flex;
}

.slide-effect {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Style the text:

.text, .slideDown, .slideUp {
  position: relative;
  font-family: tahoma;
  font-size: 35px;
  opacity:0;
}

.text {
  top:40px;
  font-weight: bold;
  animation: slideUp ease .4s forwards;
}

.slideDown {
  top:-40px;
  left:5px;
  animation: slideDown ease .4s forwards .6s;
}

.slideUp {
  top:40px;
  left:10px;
  animation: slideUp ease .5s forwards 1.2s;
}

Add CSS Animation:

@keyframes slideUp {
  0% {transform: translateY(0);}
  100% {transform: translateY(-40px);opacity:1;}
}

@keyframes slideDown {
  0% {transform: translateY(0);}
  100% {transform: translateY(40px);opacity:1;}
}

To display the animation on smaller screens (tablets, mobile):

@media only screen and (max-width: 600px) {
  .slide-effect, .text, .slideDown, .slideUp {
    font-size: 15px;
  }
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Pure CSS Rainbow Text Animation

CSS Perspective Text Effect

CSS Mirror/ Reflection Text Effect

Tags #CSSAnimation, CSS, slide-effect

Web development

CSS Window Rain (Blind Open/Close) Animation

Post author By Lena Stanley
Post date May 11, 2021

Demo:

*to see the CSS Window Rain animation on the website click here.

To create the CSS Window Rain (Blind Open/Close) animation follow the steps below and watch the video tutorial.

Add HTML
Add CSS

Step1.

Add HTML

<div class="window">
  <div class="content">
    <div class="shine"></div>
    <div class="rain">
      <div class="dropletOne"></div>
      <div class="dropletTwo"></div>
      <div class="dropletThree"></div>
      <div class="dropletFour"></div>
      <div class="dropletFive"></div>
    </div>
  </div>
   <input id='blind' type='checkbox'>
    <label class='blind' for='blind'></label>
  <div class="roll"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #5c6b73;
}

.window {
  position: relative;
}

Add the city view:

.content {
  position: relative;
  background-color: #253237;
  width: 270px;
  height: 320px;
  overflow: hidden;
  border:10px solid #fff;
}

.content:before {
  content:"";
  position: absolute;
  width: 60px;
  height: 100px;
  background-color: #242423;
  top:240px;
  box-shadow: 30px 30px #242423, 70px -15px #242423, 130px 20px #242423, 180px -5px #242423,240px 40px #242423, 220px -40px #333533,170px -20px #333533, 130px 10px #333533,90px -10px #333533,40px -30px #333533,10px -5px #333533;
}

.content:after {
  position: absolute;
  content:"";
  background-color: #b69121;
  width:10px;
  height:15px;
  top:250px;
  left:10px;
  box-shadow: 17px 0 #926c15, 34px 0 #805b10, 85px -15px #926c15, 103px -15px #b69121, 155px 15px #805b10, 175px -10px #926c15,190px -10px #b69121, 240px -40px #76520e, 40px -35px #76520e;
}

Add the rain:

.rain {
  position: absolute;
}

.rain:before {
  position: absolute;
  content:"";
  width:270px;
  height:10px;
  background-color: #fff;
  top:160px;
}

.rain:after {
  position: absolute;
  content:"";
  border-radius: 20px 20px 0 0;
  width:30px;
  height: 5px;
  background-color: #b2b2b2;
  top:155px;
  left:120px;
}

.dropletOne, .dropletTwo, .dropletThree, .dropletFour, .dropletFive {
  position: absolute;
  background-color: #fff;
  height: 15px;
  width: 1px;
  transform: rotate(25deg);
  box-shadow: -50px -50px #fff, 50px -270px #fff, 60px -100px #fff,-40px -130px #fff, -80px -250px #fff;
}

.dropletOne {
  left:200px;
  animation: rain 1.3s linear infinite;
}

.dropletTwo {
  top:-20px;
  left:100px;
  animation: rain .8s linear infinite .5s;
}

.dropletThree  {
  top:-50px;
  left:50px;
  animation: rain 1.2s linear infinite 1s;
}

.dropletFour {
  top:-70px;
  left:150px;
  animation: rain 1s linear infinite 1.3s;
}

.dropletFive {
  top:-50px;
  left:230px;
  animation: rain 1.1s linear infinite 1.7s;
}

Animate the rain:

@keyframes rain {
  0% {
    opacity: 0.9;
    top: -100px;
    transform: rotate(25deg) translateX(0);
  }
  100% {
    opacity: 0;
    top: 600px;
    transform: rotate(25deg) translateX(-150px);;
  }
}

Style the rest of the window:

.shine {
  position: absolute;
  background-color: rgba(255,255,255,0.03);
  width:70px;
  height:290px;
  top:40px;
  left:20px;
  transform: skew(-30deg);
  box-shadow: 190px 0 rgba(255,255,255,0.03);
}
.roll {
  position: absolute;
  z-index:10;
  background-color: #333;
  width: 320px;
  height: 15px;
  border-radius:20px 20px 0 0;
  left:-15px;
  top:-10px;
}

.roll:before {
  position: absolute;
  width:350px;
  content:"";
  background-color: #fff;
  height:15px;
  left:-15px;
  top:350px;
  box-shadow: 0 10px 10px rgba(0,0,0,0.15);
}

Add the blind:

.blind {
  position: absolute;
  width: 290px;
  height: 50px;
  background-color: #9db4c0;
  left:0;
  top:0;
  z-index:2;
  transition: .5s;
  box-shadow: inset 0 -7px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.15);
}

.blind:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:2px;
  height: 130px;
  top:0;
  left:300px;
}

.blind:after {
  content:"";
  position: absolute;
  width: 10px;
  height:25px;
  border-radius:20px;
  background-color: #333;
  top:130px;
  left:296px;
  cursor: pointer;
}

To animate the blind (open/close on click):

input#blind {
  display: none;
}

#blind:checked + .blind {
  height: 340px;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Desk Lamp (Switch On/ Off)

CSS Birthday Animation

CSS Cyclist /Bike Animation

Tags #CSSAnimation, #rainanimation, checkbox, CSS, rain, window

Web development

CSS Moon orbiting the Earth on the SVG path

Post author By Lena Stanley
Post date May 3, 2021

Demo:

*to see the animation on the website click here.

To create the CSS Earth and Moon animation follow the steps below:

Add HTML
Add CSS

Step1.

Add HTML

<div class="container">
  <div class="clouds"></div>
  <div class="planet">
  </div>
  <div class="moon"></div>
  <div class="up"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #072137;
}

.container {
  position: relative;
}

Add clouds:

.clouds {
  position: absolute;
  background-color: #041c2f;
  width:200px;
  height: 40px;
  border-radius:50px;
  top:-45px;
  left:90px;
  box-shadow: -140px 40px #072137,140px 40px #072137,20px 40px #041c2f, 20px 80px #041c2f, 180px 120px #072137, 20px 120px #041c2f, 70px 160px #041c2f, -180px 160px #041c2f, -290px 200px #072137,-10px 200px #072137,-120px 200px #041c2f, -140px 240px #041c2f;
}

.clouds:before {
  content:"";
  position:absolute;
  width:7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.3);
  top:-10px;
  box-shadow: -100px 100px rgba(255,255,255,0.3), 130px 230px rgba(255,255,255,0.3), 50px 310px rgba(255,255,255,0.3), -130px 215px rgba(255,255,255,0.3);
}

.clouds:after {
  content:"";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
  left:50px;
  top:20px;
  box-shadow: 100px 100px rgba(255,255,255,0.2), -100px 240px rgba(255,255,255,0.2);
}

Style the planet:

.planet {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #00a5cf;
  border-radius:50%;
  overflow:hidden;
}

.planet:before {
  content:"";
  position: absolute;
  background-color: #368715;
  width:100px;
  height:25px;
  border-radius:20px;
  left:15px;
  box-shadow:60px 25px #00a5cf,25px 25px #368715, -25px 25px #368715, 50px 50px #368715, -15px 50px #368715, 90px 75px #00a5cf,30px 75px #368715, -15px 75px #368715, -25px 0px #368715;
  top:100px;
}

.planet:after {
  content:"";
  position: absolute;
  width:200px;
  height:200px;
  border-radius: 50%;
  top:0;
  box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}
.up {
  position: absolute;
  background-color: #00a5cf;
  width:200px;
  height:100px;
  border-radius: 100px 100px 0 0;
  top:0;
  overflow:hidden;
}

.up:before {
  content:"";
  position: absolute;
  background-color: #368715;
  width:100px;
  height:25px;
  border-radius:20px;
  left:-10px;
  box-shadow:60px 25px #00a5cf,25px 25px #368715, -25px 25px #368715, 50px 50px #368715, -5px 50px #368715, 90px 75px #00a5cf,30px 75px #368715, -10px 75px #368715;
}

.up:after {
  content:"";
  position: absolute;
  width:200px;
  height:100px;
  border-radius: 100px 100px 0 0;
  top:0;
  box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}

Style the moon with the offset-path:

.moon {
  position: absolute;
  width:40px;
  height:40px;
  background-color: #d6d6d6;
  box-shadow: inset -5px 5px rgba(0,0,0,0.2);
  border-radius:50%;
  top:-135px;
  left:-175px;
  overflow:hidden;
  offset-path: path("M280.25,191c38.55,0,74.78,5.44,102,15.32C409.18,216.08,424,228.93,424,242.5s-14.82,26.42-41.74,36.18C355,288.56,318.8,294,280.25,294s-74.78-5.44-102-15.32c-26.91-9.76-41.74-22.61-41.74-36.18s14.83-26.42,41.74-36.18c27.24-9.88,63.47-15.32,102-15.32m0-1c-79.95,0-144.76,23.51-144.76,52.5S200.3,295,280.25,295,425,271.49,425,242.5,360.19,190,280.25,190Z");
  animation: move 6s linear infinite;
}

.moon:before, .moon:after {
  content:"";
  position: absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow: inset 2px 2px rgba(0,0,0,0.2);
  background-color: #e5e5e5;
}

.moon:before {
  top:5px;
  left:25px;
}

.moon:after {
  top:35px;
  left:10px;
}

Animate the moon (Orbiting around the Earth):

@keyframes move {
  to { 
    offset-distance: 50%;
  }
}

Enjoy coding!

Read also:

Pure CSS Train Animation

CSS Saturn/ Planet Rings

CSS Train Front Animation/ Loader

Tags #CSSAnimation, #SVG, CSS, svg