Ferris Wheel

The Project

Animated ferris wheel developed with CSS Animations, @keyframes and advanced transforms. A project that marked a turning point in connecting Figma and code.

Source Code

index.html
styles.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Ferris Wheel</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <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"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
    </div>
  </body>
</html>

.wheel {
  border: 2px solid black;
  border-radius: 50%;
  margin-left: 50px;
  position: absolute;
  height: 55vw;
  width: 55vw;
  max-width: 500px;
  max-height: 500px;
  animation-name: wheel;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.line {
  background-color: black;
  width: 50%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0% 0%;
}

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

.cabin {
  background-color: red;
  width: 20%;
  height: 20%;
  position: absolute;
  border: 2px solid;
  transform-origin: 50% 0%;
  animation: cabins 10s ease-in-out infinite;
}

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

@keyframes wheel {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

@keyframes cabins {
  0% {
    transform: rotate(0deg);
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: purple;
  }

  75% {
    background-color: yellow;
  }

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

The Revolutionary Connection

This project was amazing! Here I connected Figma with code like never before.

As usual I didn't stop at learning what freeCodeCamp taught me, but I deepened many parts. One in particular where I want to focus is animations.

The Animation Deep Dive

With this project I should have only learned linear and ease-in-out, but remembering the names I decided to deepen animations to know all those I learned in Breccia's UI/UX design course, making a complete selection that I'll add to the handbook.

The Figma → CSS Translation Table

IN FIGMA READ	IN CSS WRITE	WHEN
Linear	`linear`	🤖 Mechanical
Ease	`ease`	😌 Natural
Ease In	`ease-in`	🚀 Accelerates
Ease Out	`ease-out`	🛑 Slows down
Ease In and Out	`ease-in-out`	🎢 Smooth
Custom Bezier	`cubic-bezier(0.87,0,0.24,0.99)`	🎭 Your style
Smart Animate	`animation: name 300ms ease;`	🎬 Animate

Immediate Practical Application

It was an important step that will surely be useful in the prototyping phase. Just yesterday I finished the wireframes to complete Google UX course 3 where I used a Smart Animate Custom Bezier with values 0.87, 0, 0.24, 0.99 800ms that gave animations like a rocket that gently brakes.

Today I learned that I can translate it to CSS with:

animation: animationname 800ms cubic-bezier(0.87, 0, 0.24, 0.99);

What I Learned

CSS Animations:

@keyframes to define animation sequences
animation-name, animation-duration, animation-iteration-count
animation-timing-function with all variants
transform-origin for custom rotation points

CSS Transforms:

rotate() for precise rotations
transform-origin for pivot point control
nth-of-type() to select specific elements

Figma-CSS Integration:

Direct translation from Smart Animate to CSS animation
Custom Bezier curves for personalized animations
Perfect timing between prototype and implementation

Reflection

This project demonstrated how powerful it is to not stop at minimum requirements. Deepening animations will allow me to prototype in Figma knowing exactly how to implement everything in CSS. It's the perfect union between design and development.

Next Project: Learn CSS Transforms by Building a Penguin

The Project​

Source Code​

The Revolutionary Connection​

The Animation Deep Dive​

The Figma → CSS Translation Table​

Immediate Practical Application​

What I Learned​

Reflection​