Categories
CSS Web development

CSS Train Animation

Recently often I travel by train. Any minute can not be wasted so… by seating, during the travel, I created CSS Train Animation.

CSS Train
Do you like this image? Check more images in the store.

Follow the steps below and try to create your own CSS train animation.

*animation opened in the Safari browser.
To see the live output of the animation click here.

What do you need to do?

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

Step 1.

Add HTML

Create the circle which we’ll put our content:

<div id="circle">
   <div id="content">

Add sky with the sun:

<div class="sky">
       <div class="sun"></div>
     </div>

Create the train with the chimney:

<div class="train">
       <div class="compartment">
         <div class="chimney">
  <div id="steam" class="steam1"></div>
  <div id="steam" class="steam2"></div>
  <div id="steam" class="steam3"></div>
  <div id="steam" class="steam4"></div>
         </div>
       </div>
          <div class="compartment1">
       </div>
     </div>

Add the bridge:

<div class="bridge">
       <div class="bridge1"></div>
       </div>

and the mountains:

<div class="mountains">
         <div class="mountain1"></div>
         <div class="mountain2"></div>
       </div>
  </div>
</div>

Step 2.

Add CSS

Set the colour and the size of the background:

body{
   background-color: #c9c9c5;
   background-size: 100vh;
}

Style the circle:

#circle {
   background-color: #c9c9c5;
   background:linear-gradient(to bottom, #d4bd9d 64%,#b35d2e 65%, #bda022);
   width:450px;
   height:450px;
   border-radius: 50%;
   margin:0 auto;
   position: relative;
   z-index: 1;
   overflow:hidden;
}
#circle #content{
   background-color:transparent;
   width:450px;
   height:450px;
   border-radius:50%;
   margin:0 auto;
   box-shadow: inset 0 0 5px gray; 
   position:relative;
}

Fill the sky by the sun:

.sun{
   background-color:yellow;
   width:48px;
   height:48px;
   z-index:2;
   border-radius:50%;
   position:absolute;
   margin-left:130px;
   margin-top:75px;
   box-shadow:0 0 5px yellow, 0 0 10px #f2b750, 0 0 90px white;
   animation: bounce alternate infinite 400ms 40ms ease-in-out;
}

Note: To the sun, I added the animation: bounce.

Style the bridge:

.bridge {
  position: absolute;
}
.bridge1 {
  position: absolute;
  background-color: #194d07;
  width: 450px;
  height: 150px;
  top: 220px;
  z-index:1;
}
.bridge1:after {
  content:"";
  position: absolute;
  background-color: #bd561e;
  width: 120px;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  top: 50px;
  left: 20px;
  z-index:2;
}
.bridge1:before {
  content:"";
  position: absolute;
  background-color: #bd561e;
  width: 120px;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  top: 50px;
  left: 240px;
  z-index:2;
}

Style the mountains:

.mountains {
  position: realative;
}
.mountain1 {
  position: absolute;
  top: 120px;
  left: -60px;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  
  
}
.mountain1:after {
  content:"";
  position: absolute;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  left: -30px;
}
.mountain1:before {
  content:"";
  position: absolute;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  left: 160px;
  
}
.mountain2 {
  position: absolute;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  left: 160px;
  opacity: 0.6;
  top: 120px;
  
}
.mountain2:after {
  content:"";
  position: absolute;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  left: -220px;
  opacity: 0.6;

}
.mountain2:before {
  content:"";
  position: absolute;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  left: -450px;
  opacity: 0.6;

}

and finally – style the train:

.train {
  position: relative;
  animation:speed 6s linear infinite;
}
.compartment {
  background-color: #f22f11;
  position: absolute; 
  width: 120px;
  height: 40px;
  z-index:3;
  top: 177px;
  border-radius: 20px;
  border: 2px solid black;
  left: 200px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}
.compartment:after {
  content:"";
  position: absolute; 
  width: 110px;
  height: 15px;
  border-radius:20px;
  background-color: lightblue;
  border: 2px solid black;
  top: 5px;
  left: 3px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  
}
.compartment:before {
  content:"";
  position: absolute; 
  width: 30px;
  height: 15px;
  z-index:4;
  background-color: lightblue;
  border: 2px solid black;
  top: 5px;
  left: 45px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  
}
.chimney {
  position:absolute;
  background-color: black;
  width: 20px;
  height: 10px;
  border-radius: 10px;
  top: -10px;
  left: 85px;
}
.compartment1 {
  background-color: #f22f11;
  position: absolute; 
  width: 120px;
  height: 40px;
  z-index:3;
  top: 177px;
  border-radius: 20px;
  border: 2px solid black;
  left: 75px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}
.compartment1:after {
  content:"";
  position: absolute; 
  width: 110px;
  height: 15px;
  border-radius:20px;
  background-color: lightblue;
  border: 2px solid black;
  top: 5px;
  left: 3px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  
}
.compartment1:before {
  content:"";
  position: absolute; 
  width: 30px;
  height: 15px;
  z-index:4;
  background-color: lightblue;
  border: 2px solid black;
  top: 5px;
  left: 45px;  
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}

#steam{
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #F3F1E7;
  border-radius: 50%;
  z-index: 0;
  opacity: 0;
  top: -20px;
  left:-15px;
}
.steam1 {
  animation: steam1 2s ease-out infinite; 
}
.steam3 {
  animation: steam1 2s ease-out 1s infinite; 

Note: I added to the train and to the steam element animations –speed, steam1, and steam2.

Step 3.

Add CSS Animation

For steam:

@keyframes steam1{
  0%{
    transform: translateY(0) translateX(0) scale(0.3);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-200px) translateX(-20px) scale(1);
    opacity: 0;
  }
}
.steam2 {
  animation: steam2 1s ease-out 0.5s infinite; 
}
.steam4 {
  animation: steam2 2s ease-out 1.5s infinite; 
}
@keyframes steam2{
  0%{
    transform: translateY(0) translateX(0) scale(0.4);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-150px) translateX(-30px) scale(1);
    opacity: 0;
  }
}

For train:

@keyframes speed {
	from{left:-120px;}
	to{left:130%}
}  

and for the sun:

@keyframes bounce { 
  to { transform: scaleX(1.03) scaleY(0.97); } 
}

To see the live output visit: lenastanley.com.

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *