iOSのロック画面のエラーの際の動きをCSSでまねる

まねてみました。

DEMO

See the Pen PIN by kimmy (@kimmy) on CodePen.

SCSS

body {
  background: #333;
}

.dots {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 156px; height: 12px;

  @for $i from 0 through 4 {
    &[data-index="#{$i}"] {
      .dot {
        @for $j from 1 through 4 {
          &:nth-child(#{$j}) {
            @if ($i >= $j) {
              background: rgba(255, 255, 255, .5);
            } @else {
              background: rgba(255, 255, 255, 0);
            }
          }
        }
      } 
    }

    &.miss {
      animation: miss .8s ease-out 1;
    }
  }
}

.dot {
  float: left;
  margin: 0 13px;
  border: solid 1px rgba(255, 255, 255, .5);
  border-radius: 50%;
  width: 11px; height: 11px;
  background: rgba(255, 255, 255, 0);
  transition: background .4s ease-in-out;
}

@keyframes miss {
  0% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(-25px, 0);
  }

  20% {
    transform: translate(25px, 0);
  }

  30% {
    transform: translate(-20px, 0);
  }

  40% {
    transform: translate(20px, 0);
  }

  50% {
    transform: translate(-10px, 0);
  }

  60% {
    transform: translate(10px, 0);
  }

  70% {
    transform: translate(-5px, 0);
  }

  80% {
    transform: translate(5px, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}