The Flux Illusion

index.html

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

script.js

// Stare at one of them and you'll see how this works

style.css

body {
  background: #222;
}

ul {
  position: relative;
  list-style: none;
  border-radius: 100%;
  width: 0px;
  height: 0px;
  margin: 100px auto;
}

ul > li {
  position:absolute;
  width: 1px;
  height: 200px;
  top: 0;
  left: 0;
  transform-origin: center;
  background: rgba(0,0,0,0.1);
}

ul > li:after {
  position:absolute;
  width:5px;
  height: 10px;
  content: "";
  background: #ff9900;
  border-radius: 50%;
  margin-left: -2.5px;
  animation: move 1s infinite ease-in-out alternate;
}


ul > li:nth-of-type(1):after{
  animation-delay: 0;
}

ul > li:nth-of-type(2):after{
  animation-delay: -.25s;
}

ul > li:nth-of-type(3):after{
  animation-delay: -.5s;
}

ul > li:nth-of-type(4):after{
  animation-delay: -.75s;
}

ul > li:nth-of-type(5):after{
  animation-delay: -1s;
}

ul > li:nth-of-type(6):after{
  animation-delay: -1.25s;
}



ul > li:nth-of-type(7):after{
  animation-delay: -1.5s;
}

ul > li:nth-of-type(8):after{
  animation-delay: -1.75s;
}

ul > li:nth-of-type(9):after{
  animation-delay: -2s;
}

ul > li:nth-of-type(10):after{
  animation-delay: -2.25s;
}

ul > li:nth-of-type(11):after{
  animation-delay: -2.5s;
}

ul > li:nth-of-type(12):after{
  animation-delay: -2.75s;
}

ul > li:nth-of-type(1){
  transform: rotate(0deg);
}

ul > li:nth-of-type(2){
  transform: rotate(15deg);
}

ul > li:nth-of-type(3){
  transform: rotate(30deg);
}

ul > li:nth-of-type(4){
  transform: rotate(45deg);
}

ul > li:nth-of-type(5){
  transform: rotate(60deg);
}

ul > li:nth-of-type(6){
  transform: rotate(75deg);
}

ul > li:nth-of-type(7){
  transform: rotate(90deg);
}

ul > li:nth-of-type(8){
  transform: rotate(105deg);
}

ul > li:nth-of-type(9){
  transform: rotate(120deg);
}

ul > li:nth-of-type(10){
  transform: rotate(135deg);
}

ul > li:nth-of-type(11){
  transform: rotate(150deg);
}

ul > li:nth-of-type(12){
  transform: rotate(165deg);
}


@keyframes move {
 from { transform:translatey(-200px) }
 from { transform:translatey(200px) }
}

The-Flux-Illusion.markdown

The Flux Illusion

what started off as a pure CSS circle illusion, this is the result of getting the timings wrong... But doesn't this look so much better?

A Pen by Nico on CodePen.

License.