Pure CSS3 Infinite Stair Step Animation

Pure CSS3 Infinite Stair Step Animation: BY Thomas7 Jan,2021; Tags:
CSS3 Animation

Introduction

Today we want to bring you a very interesting pure CSS3 animation effects. This is an endless staircase animation, from a visual point of view, the steps are like circling up, just like an escalator that can move in an endless loop. This step is just a simple div stacked up, using CSS3 animation properties to make these divs move, thus producing the visual effect of the stairs circling up.

Instructions

HTML Body Code

<div class="panel">
    <div class="panel_frame"></div>
    <div class="panel_back"></div>
  </div>
  <div class="pillar">
    <div class="ref"></div>
  </div>
  <div class="wall"></div>
  <div class="step">
    <div class="step_inner">
      <div class="step_top"></div>
      <div class="step_side"></div>
    </div>
  </div>
  <div class="step">
    <div class="step_inner">
      <div class="step_top"></div>
      <div class="step_side"></div>
    </div>
  </div>
  <div class="step">
    <div class="step_inner">
      <div class="step_top"></div>
      <div class="step_side"></div>
    </div>
  </div>

Css Code

div {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

#window {
  width: 300px;
  height: 400px;
}
#window .panel_frame {
  top: -150px;
  left: -150px;
  width: 75px;
  height: 98px;
  border: 150px solid black;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-transform: translate3d(112.5px, 151px, 300px);
          transform: translate3d(112.5px, 151px, 300px);
  border-radius: 152px;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3) inset;
          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3) inset;
}

VIEW NOW