Categories
CSS Web development

CSS Halloween Animation on Hover: Dracula/ Vampire

CSS Halloween Animation on Hover:  Dracula/ Vampire

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

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

Categories
CSS Web development

CSS Falling Autumn Leaves

CSS Falling Autumn Leaves

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

Categories
CSS Web development

CSS @keyframes Rule

CSS @keyframes Rule

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

Categories
CSS Web development

CSS Steaming Coffee

CSS Steaming Coffee

Demo:

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

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

  1. Add HTML
  2. 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;
}
CSS Coffee Cup

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!

Categories
CSS Web development

CSS Bouncing Text Animation

CSS Bouncing Text Effect

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.

  1. Add HTML
  2. 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;
}
CSS Bounce effect text animation

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!

Read also:

CSS Slide Text Animation/ Slide Effect

CSS Mirror/ Reflection Text Effect

CSS Sliced Text Effect

Categories
CSS Web development

CSS Cyclist /Bike Animation

CSS Bike Animation

Demo:

*to see the animation on the website click here.

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

  1. Add HTML
  2. 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;
}
CSS Bike Animation

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);
}
CSS Bike

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);}
}
CSS Cycling Animation

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

Categories
CSS Web development

CSS Slide Text Animation/ Slide Effect

CSS Slide 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:

  1. Add HTML
  2. 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!

Categories
CSS Web development

CSS Window Rain (Blind Open/Close) Animation

CSS Rain Animation

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.

  1. Add HTML
  2. 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;
}
CSS Window Rain Animation

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);;
  }
}
CSS Rain Animation

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);
}
CSS Window Rain

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;
}
CSS Window Blind Animation

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

input#blind {
  display: none;
}

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

Watch also the video tutorial:

Enjoy coding!

Categories
#SVG CSS Web development

CSS Moon orbiting the Earth on the SVG path

CSS Earth with the Moon

Demo:

*to see the animation on the website click here.

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

  1. Add HTML
  2. 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);
}
CSS Planet Earth

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!

Categories
CSS Web development

CSS Train Front Animation/ Loader

CSS Train Front Animation

Demo:

*to see the animation on the website click here.

To create the CSS Train Front Animation/ Loader follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
  <div class="track"></div>
  <div class="train"></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;
}

.container {
  position: relative;
}

Add the track:

.track {
  position: relative;
  overflow:hidden;
  width:50px;
  height:100px;
  border-left: 3px solid #333;
  transform: skew(-10deg) rotateX(45deg);
}

.track:before {
  content:"";
  position: absolute;
  height:3px;
  width:50px;
  background-color: #333;
  top:90px;
  box-shadow: 0 0 #333, 0 -10px #333, 0 -20px #333, 0 -30px #333, 0 -40px #333, 0 -50px #333, 0 -50px #333, 0 -60px #333,0 -70px #333, 0 -80px #333, 0 -90px #333, 0 -100px #333, 0 -110px #333, 0 -120px #333, 0 -130px #333, 0 -140px #333;
  animation: track 1s linear infinite;
}
.track:after {
  content:"";
  position: absolute;
  transform: rotate(-15deg);
  width:50px;
  height: 120px;
  background-color: #fff;
  border-left: 3px solid #333;
  left:30px;
  top:-10px;
}

Style the train:

.train {
  position: absolute;
  width: 60px;
  height:60px;
  background-color: #333;
  border-radius:15px;
  top:0;
  left:-13px;
  transform-origin: bottom;
  animation: rotate 1s linear infinite;
}

.train:before {
  content:"";
  position: absolute;
  background-color: #ced4da;
  width:20px;
  height:15px;
  left:9px;
  top:15px;
  box-shadow: 22px 0 #ced4da;
}

.train:after {
  content:"";
  position: absolute;
  background-color: #ced4da;
  border-radius:50%;
  height:10px;
  width:10px;
  top:45px;
  left:10px;
  box-shadow: 30px 0px #ced4da;
}

Step3.

Add CSS Animation

@keyframes track {
  0% {transform: translateY(70px) rotateX(45deg);}
  100% {transform: translateY(0px) rotateX(45deg);}
}

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

Watch also the video tutorial:

Enjoy coding!