Animation CSS test

by ussuy

HTML

<div tabindex="1">
    
</div>

SCSS

div {
  width: 300px;
  height: 300px;
  background-color: blue;
  animation: infinite;
  animation-duration: 1s;
  animation-name: slidein;
  animation-timing-function: ease;
  animation-direction: alternate-reverse;
  animation-play-state: paused;
  &:focus {
       animation-play-state: running;
       outline: 5px solid red;
  }
}


@keyframes slidein {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }
}