Tag: #train

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!

Hey, here’s something that might interest you:

Pure CSS Train Animation

CSS Plane Animation

CSS Airplane Window (Open/Close)

Categories
CSS Web development

Pure CSS Train Animation

I’ve been thinking about travel a lot recently and yes, I miss it a lot. Are you missing traveling?

CSS train animation

I created simple Train Animation using the CSS basic shapes:

Demo:

*to see the animation on the website click here.

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

Step1.

Add HTML

<div class="container">
  <div class="content">
    <div class="track"></div>
    <div class="train">
      <div class="front"></div>
      <div class="wheels">
        <div class="smallOne"></div>
        <div class="smallTwo"></div>
        <div class="smallThree"></div>
        <div class="smallFour"></div>
        <div class="smallFive"></div>
        <div class="smallSix"></div>
        <div class="big"></div>
      </div>
      <div class="cord"></div>
      <div class="coach"></div>
      <div class="coachTwo"></div>
      <div class="windows"></div>  
      <div id="up" class="steam"></div>
      <div id="up" class="steam2"></div>
    </div>
  </div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
}

.content {
  position: relative;
  width: 400px;
  height: 400px; 
  overflow: hidden;
}

Create the track:

.track {
  position: absolute;
  width:400px;
  height:5px;
  background-color: #333;
  top:300px;
}

.track:before {
  content:"";
  position: absolute;
  width:10px;
  height:5px;
  background-color: #333;
  top:4px;
  box-shadow: 20px 0 #333, -20px 0 #333, -40px 0 #333, -60px 0 #333, -80px 0 #333, 40px 0 #333, 60px 0 #333, 80px 0 #333, 100px 0 #333, 120px 0 #333, 140px 0 #333, 160px 0 #333, 180px 0 #333, 200px 0 #333, 220px 0 #333, 240px 0 #333, 260px 0 #333, 280px 0 #333, 300px 0 #333, 320px 0 #333, 340px 0 #333, 360px 0 #333, 380px 0 #333, 400px 0 #333, 420px 0 #333, 440px 0 #333, -100px 0 #333, -120px 0 #333, -140px 0 #333, 460px 0 #333, 480px 0 #333;
  animation: move 1s linear infinite reverse;
}

Style the train:

.train:before {
  content:"";
  position: absolute;
  border:5px solid #333;
  background-color: #335c67;
  width:35px;
  height:60px;
  left:-45px;
  top:-35px;
}

.train:after {
  position: absolute;
  content:"";
  width: 100px;
  height:5px;
  border-radius:10px;
  border: 5px solid #333;
  background-color: #fff3b0;
  top:30px;
  left:-50px;
}

.front {
  position: absolute;
  border: 5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width:20px;
  height:30px;
  left:-37.5px;
  top:-20px;
}

.front:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:15px;
  height:5px;
  border-radius:10px;
  top: 25px;
  left:70px;
  box-shadow: 0px 10px #333, -50px -45px #333, -86px -45px #333, -22px -41px #333,-11px -41px #333;
}

.front:after {
  content:"";
  position: absolute;
  width:12px;
  height:20px;
  border: 5px solid #333;
  left:50px;
  top:-16px;
  background-color:#adb5bd;
}

.wheels {
  position: absolute;
  z-index:1;
}

.smallOne, .smallTwo, .smallThree, .smallFour, .smallFive, .smallSix {
  position: absolute;
  border: 5px solid #333;
  border-radius:50%;
  width: 15px;
  height:15px;
  top:40px;
  background-color: #e09f3e;
  box-shadow: inset 2px 2px white;
  z-index:2;
}

.smallOne {
  left: 30px;
  animation: spin .5s infinite linear;
}

.smallTwo {
  left:0;
  animation: spin .5s infinite linear;
}

.smallThree {
  left:-225px;
  animation: spin .5s infinite linear;
}

.smallFour {
  left:-190px;
  animation: spin .5s infinite linear;
}

.smallFive {
  left:-130px;
  animation: spin .5s infinite linear;
}

.smallSix {
  left:-95px;
  animation: spin .5s infinite linear;
}

.big {
  position: absolute;
  border: 5px solid #333;
  border-radius:50%;
  width:25px;
  height:25px;
  background-color: #e09f3e;
  box-shadow: inset 2px 2px white;
  top:30px;
  left:-40px;
  animation: spin .5s infinite linear;
}

.cord {
  position: absolute;
  width: 10px;
  height:5px;
  background-color: #333;
  top:35px;
  left:-59px;
  z-index:3;
}

.cord:before {
  content:"";
  position: absolute;
  height:5px;
  width: 70px;
  background-color: #333;
  top:15px;
  left:35px;
}

.cord:after {
  content:"";
  position: absolute;
  background-color: #333;
  border-radius:50%;
  width:15px;
  height:15px;
  top:5px;
  left:29px;
}

.coach {
  position: absolute;
  width:80px;
  height:60px;
  border:5px solid #333;
  background-color: #9e2a2b;
  left:-145px;
  top:-20px;
}

.coach:before {
  content:"";
  position: absolute;
  width: 10px;
  height:5px;
  background-color: #333;
  top:50px;
  left:-15px;
}

.coach:after {
  content:"";
  position: absolute;
  width:80px;
  height:60px;
  border:5px solid #333;
  background-color: #335c67;
  top:-5px;
  left:-100px;
}

.coachTwo {
  position: absolute;
  border:5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width: 15px;
  height:25px;
  left:-225px;
  top:-5px;
}

.coachTwo:before, .coachTwo:after {
  content:"";
  position: absolute;
  border:5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width: 15px;
  height:25px;
  top:-5px;
}

.coachTwo:before {
  left:30px;
}

.coachTwo:after {
  left:90px;
}

.windows {
  position: absolute;
  border:5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width: 15px;
  height:25px;
  left:-95px;
  top:-5px;
  z-index:6;
}

.windows:before {
  content:"";
  position: absolute;
  background-color: #333;
  height:5px;
  width: 95px;
  border-radius:10px;
  top:-20px;
  left:-153px;
  box-shadow: 95px 0px #333;
}

.windows:after {
  content:"";
  position: absolute;
  background-color: #333;
  height:5px;
  width:40px;
  top:51px;
  left:-125px;
  box-shadow: 95px 0 #333;
}

Add steam to the chimney:

#up {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
  top: -30px;
  left: 25.5px;
  z-index:-1;
}

.steam {
  animation: up 2.5s ease-out infinite; 
}

.steam2 {
  animation: up 1.7s ease-out infinite 1s; 
}

.steam2:before {
  content:"";
  position: absolute;
  left:5px;
  width:15px;
  height:15px;
  background-color: #fff;
  border-radius:50%;
  top:20px;
}

Step3.

Add CSS Animation

To spin the wheels:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

For the track:

@keyframes move {  
  from { left: -100px; }
    to { left: 100px; }
}

and the steam:

@keyframes up {
  0%{
    transform: translateY(0) translateX(0) scale(0.5);
    opacity: 1;
  }
  100%{
    transform: translateY(-110px) translateX(-80px) scale(1.5);
    opacity: 0.2;
  }
}

To see the animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Train Animation

CSS Train Front Animation/ Loader

CSS Car Animation

Categories
Web development

CSS Train Animation

CSS Train Animation

CSS train animation

Demo:

*to see the animation on the website click here.

Follow the steps below and learn how to create the CSS train animation:

What do you need to do?

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

Step 1.

Add HTML

<div class="trainAnimation">
  <div class="content">
    <div class="buildings"></div>
    <div class="windows"></div>
    <div class="bridge"></div>
    <div class="train">
      <div class="carOne"></div>
      <div class="carTwo"></div>
      <div class="carThree"></div>
    </div>
    <div class="moon"></div>
    <div class="stars"></div>
  </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;
}

.trainAnimation {
  position: relative;
}

.content {
  position: relative;
  width:400px;
  height: 400px;
  background-color: #164668;
  border-radius:50%;
  overflow: hidden;
}

Add some buildings:

.buildings {
  position: relative;
  background-color: rgba(5, 51, 83);
  width: 80px;
  height: 300px;
  left:0;
  top:150px;
  box-shadow: 80px 40px rgba(5, 51, 83), 120px -30px rgba(5, 51, 83), 150px 20px rgba(5, 51, 83), 190px -10px rgba(5, 51, 83, 0.5), 30px -10px rgba(5, 51, 83,0.5), 220px 70px rgba(5, 51, 83), 280px -25px rgba(5, 51, 83, 0.5), 360px 20px rgba(5, 51, 83,0.5),270px 30px rgba(5, 51, 83), 320px 70px rgba(5, 51, 83);
}

.buildings:before {
  position: absolute;
  content:"";
  width: 10px;
  height:15px;
  background-color: rgb(252,163,17);
  left:13px;
  top:10px;
  box-shadow: 23px 0px rgb(252,163,17,0.7), 47px 0px rgb(252,163,17,0.2), 0px 30px rgb(252,163,17,0.2), 23px 30px rgb(252,163,17,0.2), 47px 30px rgb(252,163,17), 120px -30px rgb(252,163,17,0.6), 140px -30px rgb(252,163,17), 160px -30px rgb(252,163,17,0.2),120px 0px rgb(252,163,17,0.2),140px 0px rgb(252,163,17,0.2), 160px 0px rgb(252,163,17,0.2), 270px 30px rgb(252,163,17,0.2), 290px 30px rgb(252,163,17,0.2),310px 30px rgb(252,163,17,0.5);
}

.buildings:after {
  content:"";
  position: absolute;
  background-color: #041c2d;
  width: 100px;
  height:250px;
  top:90px;
  box-shadow:100px 30px #041c2d,150px -10px #041c2d, 230px 50px #041c2d, 300px -20px #041c2d;
}

.windows {
  position: absolute;
  background-color: rgb(252,163,17);
  width: 20px;
  height: 25px;
  left:310px;
  top:230px;
  box-shadow: 30px 0 rgb(252,163,17), 60px 0 rgb(252,163,170,0.3),30px 40px rgb(252,163,170,0.3), 60px 40px rgb(252,163,17), -140px 20px rgb(252,163,17), -100px 20px rgb(252,163,17,0.3), -100px 60px rgb(252,163,17),-250px 30px rgb(252,163,17,0.8),-250px 70px rgb(252,163,17,0.2),-290px 30px rgb(252,163,17,0.2);
}

.windows:before {
  content:"";
  position: absolute;
  background-color: rgb(252,163,17,0.1);
  width: 25px;
  height:7px;
  left:-73px;
  top:-80px;
  box-shadow: 50px 15px rgb(252,163,17,0.1), 125px 40px rgb(252,163,17,0.1), 125px 55px rgb(252,163,17,0.1);
}

.windows:after {
  content:"";
  position: absolute;
  background-color: rgb(252,163,17);
  width: 15px;
  height: 20px;
  top:-50px;
  left:-102px;
  box-shadow: -115px 20px rgb(252,163,17), 47px 50px rgb(252,163,17);
  animation: flash 4s ease infinite alternate;
}

Style the bridge:

.bridge {
  position: absolute;
  z-index:4;
  width:400px;
  height:5px;
  top:280px;
  border-bottom: 5px solid #333;
  border-top: 2px solid #333;
}

.bridge:after, .bridge:before {
  content:"";
  position: absolute;
  background-color: #333;
}

.bridge:before {
  width:2px;
  height:5px;
  left:60px;
  box-shadow:110px 0px #333,160px 0px #333,270px 0px #333,320px 0px #333;
}

.bridge:after {
  width:15px;
  height:150px;
  left:110px;
  box-shadow: 160px 0 #333;
}

Style the train:

.train {
  position: absolute;
  z-index:3;
  animation: move 6s linear infinite;
}

.carOne {
  position: absolute;
  width: 100px;
  height:30px;
  background-color: #9e2a2b;
  left:220px;
  top:-50px;
  border-radius: 0 30px 0 0;
  overflow:hidden;
  box-shadow: inset 0 -5px #540b0e;
}

.carOne:before {
  content:"";
  position: absolute;
  width: 40px;
  height: 15px;
  background-color: #540b0e;
  top:5px;
  left:60px;
}

.carOne:after {
  content:"";
  position: absolute;
  background-color: #540b0e;
  width:40px;
  height:7px;
  left:10px;
  top:10px;
}

.carTwo {
  position: absolute;
  height: 30px;
  width:90px;
  background-color: #9e2a2b;
  left:125px;
  top:-50px;
  box-shadow: inset 0 -5px #540b0e;
}

.carTwo:before {
  content:"";
  position: absolute;
  background-color: #540b0e;
  width:30px;
  height:7px;
  top:10px;
  left:10px;
  box-shadow: 40px 0px #540b0e;
}

.carTwo:after {
  position: absolute;
  content:"";
  background-color: #210405;
  border-radius:50%;
  width:10px;
  height:10px;
  top:30px;
  left:180px;
  box-shadow:-20px 0 #210405,-40px 0 #210405,-60px 0 #210405,-80px 0 #210405,-100px 0 #210405,-120px 0 #210405,-140px 0 #210405,-160px 0 #210405,-180px 0 #210405,-200px 0 #210405,-220px 0 #210405,-240px 0 #210405,-260px 0 #210405,-280px 0 #210405;
}

.carThree {
  position: absolute; 
  width: 100px;
  height:30px;
  background-color: #9e2a2b;
  border-radius: 30px 0 0 0;
  overflow:hidden;
  box-shadow: inset 0 -5px #540b0e;
  left:20px;
  top:-50px;
}

.carThree:before {
  content:"";
  position: absolute;
  background-color: #540b0e;
  width: 40px;
  height: 15px;
  top:5px;
}

.carThree:after {
  content:"";
  position: absolute;
  background-color: #540b0e;
  width:40px;
  height:7px;
  top:10px;
  left:50px;
}

Add the moon and stars:

.moon {
  position: absolute;
  width:30px;
  height:30px;
  border-radius:50%;
  box-shadow: 5px 5px rgb(234, 226, 183);
  top:60px;
  left:200px;
}

.moon:before {
  content:"";
  position: absolute;
  background-color: rgb(234, 226, 183,0.2);
  border-radius: 50%;
  width:40px;
  height:40px;
}

.moon:after {
  content:"";
  position: absolute;
  background-color: rgb(234, 226, 183,0.1);
  border-radius: 50%;
  top:-5px;
  left:-5px;
  width:50px;
  height:50px;
}

.stars {
  position: absolute;
  background-color: #fff;
  height:1px;
  width:1px;
  top:70px;
  left:150px;
  box-shadow: -70px 30px #fff,-40px -10px #fff,-20px -20px #fff, 34px -10px #fff,50px -30px #fff, -30px 23px #fff, 95px -10px #fff, 120px -15px #fff, 140px 20px #fff, 155px 30px #fff;
}

Step 3.

Add CSS Animation

To move the train:

@keyframes move {
	from{left:-170px;}
	to{left:100%}
}

For the windows:

@keyframes flash {
	from { opacity: 0.6; }	
	to { opacity: 0.1; }
}

To see the live output visit: lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Windmill Animation

CSS Plane Animation

CSS Flip Postcard