CSS keyframe Ferris-wheel animation. Easy to adjust speed and responsive.
A Pen by Jimba Tamang on CodePen.
<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> |
CSS keyframe Ferris-wheel animation. Easy to adjust speed and responsive.
A Pen by Jimba Tamang on CodePen.
/* 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); | |
} | |
} |