CRT Boot Animation – CSS

Recently I had an idea for a simple .io game based on the thought of merging a game I used to play, back in the day called hack the game by chaozz and all those wait timer, checkbox, textbased multiplayer facebook games.

as I’m writing this I’ve just discovered chaozz is working on his own version, but right now I’m showcasing the animation I built while tinkering.

@keyframes flicker {
    5%{
      background: #000
    }
    10%{
      background: #fff;
    }
    15%{
      background: #000
    }
    20%{
      background: #fff;
    }
    25%{
      background: #000
    }
    30%{
      background: #fff;
    }
    100%{
      background:var(--BC);
    }
  }
  @keyframes wobble {
    33% {
      transform: rotate(1deg);
    }
    66% {
      transform: rotate(-1deg);
    }
  }
  filter{
    display: block;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: url(../img/scanlines.png);
    background-size: 100% 100%;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
  }
  .screen{
    background:var(--BC);
    width:0;
    height:0;
    margin:0 auto;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 50vh;
    transition: margin 2s, width 2s, height 3s;
    animation: wobble 0.25s ease-in-out 2, flicker 2s 1;
  }

function boot(){
  screen.style.marginTop = "0px";
  screen.style.width = "100%";
  screen.style.height = "calc(100vh - 20px)";
  setTimeout(function(){screen.innerHTML = '<div class="aboveLine"> <p class="line">Welcome to LeemOS</p>'}, 3000);
  setTimeout(function(){screen.innerHTML = screen.innerHTML + '<p class="line">Login:</p></div><input type="text" class="display" id="display" autofocus></input>'}, 4000);
  setTimeout(function(){addEvent()}, 5000);
}