Responsive Ferris Wheel - CSS Only animation

index.html

<div class="ferris-wrapper">
  <span class="hub-back"></span>
  <span class="hub-front"></span>
  <span class="ferri-base"></span>
  <div class="wheel-wrapper">
    <div class="wheel">     
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      
      <div class="cabin">CSS</div>
      <div class="cabin">Only</div>
      <div class="cabin">Ferris</div>
      <div class="cabin">Wheel</div>
      <div class="cabin">By</div>
      <div class="cabin">Jimba</div>
      
    </div>
  </div>
		</div>

Responsive Ferris Wheel - CSS Only animation.markdown

Responsive Ferris Wheel - CSS Only animation

CSS keyframe Ferris-wheel animation. Easy to adjust speed and responsive.

A Pen by Jimba Tamang on CodePen.

License.

style.css

/* Variables */
$ferri_duration: 15s;
$color-1: #ccc;
$color-2: #fff;

// Rotate Wheel Animation
@keyframes ferri-wheel {
	0% {
    transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes cabin {
  0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(-360deg);
	}
}


html {
  font-size:6px; // base font-size for rem value
  
  // Example media queries only, you may need to adjust more to fit as per your required.
  @media (min-width:768px) {
    font-size:8px;
  }
  
  @media (min-width:1025px) {
    font-size:10px;
  }
}
body {
  margin:0;
  padding:0;
}

/* Layout */
.ferris-wrapper {
  position: relative;
  width: 58rem;
  height: 75rem;
  margin:0 auto;
}

.ferri-base {
  position:absolute;
  width: 100%;
  height: 38rem;
  z-index: 1;
  bottom: 0;
  left: 0;
  //border-bottom:1rem solid darken($color-1, 50%);
  
  &:before, &:after {
    content:"";
    border:0.1rem solid darken($color-1, 50%);
    background-color:$color-2;
    width:1rem;
    height:100%;
    position:absolute;
    left:50%;
    bottom:-5%;
    transform-origin:0% 0%;
  }
  
  &:before {
    transform:rotate(15deg) translate3d(-50%, 0, 0);
  }
  &:after {
    transform:rotate(-15deg) translate3d(-50%, 0, 0);
  }
}

.hub-back, .hub-front {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate3d(-50%,-50%,0);
  border-radius:50%;
  border:0.1rem solid darken($color-1, 50%);
}

.hub-back {
  z-index: 0;
  width: 10rem;
  height: 10rem;
  background-color:darken($color-1, 10%);
}

.hub-front {
  z-index: 4;
  width: 5rem;
  height: 5rem;
  background-color:$color-2;
}

.wheel-wrapper {
  width: 50rem;
  height: 50rem;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate3d(-50%,-50%,0);
  z-index: 3;
}
.wheel {
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  border:1px solid darken($color-1, 50%);
  border-radius:50%;

  // Rotate Wheel
  animation: ferri-wheel $ferri_duration linear infinite;
}

/* Cabin */
.cabin {
  width: 8rem;
  height: 10rem;
  position: absolute;
  border:0.1rem solid;
  background-color:$color-2;
  transform-origin:50% 0%;
  text-align:center;
  font-size:2rem;
  line-height:10rem;
  
  &:before {
    content:"";
    width:1rem;
    height:1rem;
    position:absolute;
    left:50%;
    top:-1rem;
    border:0.1rem solid darken($color-1, 50%);
    background-color:$color-2;
    border-radius:50%;
    transform:translate3d(-50%, 0, 0);
  }
  
  // Apply animation
  animation: cabin $ferri_duration linear infinite;

  &:nth-of-type(1) {
    right:-8.5%;
    top:50%;
  }

  &:nth-of-type(2) {
    right:17%;
    top:93.5%;
  }
  &:nth-of-type(3) {
    right: 67%;
    top: 93.5%;
  }
  &:nth-of-type(4) {
     left: -8.5%;
     top: 50%;
  }
  &:nth-of-type(5) {
    left: 17%;
    top: 7%;
  }
  &:nth-of-type(6) {
    right: 17%;
    top: 7%;
  }
}

// Lines
.line {
  position:absolute;
  width:50%;
  height:0.1rem;
  left:50%;
  top:50%;
  background-color:darken($color-1, 50%);
  transform-origin:0% 0%;

  &:nth-of-type(2) {
   transform:rotate(60deg); 
  }
  
  &:nth-of-type(3) {
   transform:rotate(120deg); 
  }
  
  &:nth-of-type(4) {
   transform:rotate(180deg); 
  }
  
  &:nth-of-type(5) {
   transform:rotate(240deg); 
  }
  
  &:nth-of-type(6) {
   transform:rotate(300deg); 
  }
}