JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div class="back"></div>
<div class="block"></div>
<div class="nav"></div>
<div class="aside"></div>
<div class="scroll"></div>

<span></span>

<div class="back"></div>
<div class="block"></div>
<div class="nav"></div>
<div class="aside"></div>
<div class="scroll"></div>

CSS

body {background: #fff}
div {
  position: fixed;
  box-sizing: border-box;
  top: 50%;
  animation:  linear 5s infinite forwards;
}
span  ~ div { margin-left: 180px;}
.back,
.scroll {
  width: 160px;
  height: 100px;
  left: 30px;
  transform: translateY(-85px);
}

.back { background: #000; }
.scroll { 
  border: 3px solid #000;
}

.block {
  background: gray;
  height: 300px;
  width: 150px;
  left: 35px;
  animation-name: an-block;
}

.aside {
  background: red;
  height: 140px;
  width: 40px;
  left: 40px;
  margin-top: 5px;
  animation-name: an-aside;
}

.nav {
  background: red;
  height: 30px;
  width: 95px;
  left: 85px;
  margin-top: 5px;
  animation-name: an-nav;
}

span ~ .aside {
  animation-name: an-aside--new;
}



@keyframes an-block {
  0% { transform: translateY(0); }
  100% { transform: translateY(-360px); }
}

@keyframes an-nav {
  0% { transform: translateY(0); }
  22.5% { transform: translateY(-82px); }
  95% { transform: translateY(-82px); }
  100% { transform: translateY(-100px); }
}

@keyframes an-aside {
  0% { transform: translateY(0); }
  22.5% { transform: translateY(-82px); }
  63.75% { transform: translateY(-82px); }
  100% { transform: translateY(-210px); }
}

@keyframes an-aside--new {
  0% { transform: translateY(0); }
  38.75% { transform: translateY(-138px); }
  80% { transform: translateY(-138px); }
  100% { transform: translateY(-210px); }
}

















bodys {
  transform: translateX(100px) translateY(400px);
}