<section>
  <div class="dialog out">
    <p>Hello I'm a dialog. Please, click the button below to close me.</p>
  </div>
  <div class="information">
    <span></span>
    <span></span>
  </div>
</section>

@import url('https://fonts.googleapis.com/css?family=Rubik');
$background: #fcfcfc;
$font: 'Rubik', sans-serif;
$blue: #208de0;
$red: #ee2945;

body {
  background: $background;
  width:100%;
  font-family: $font;
}

section {
  position: relative;
  max-width: 240px;
  margin: 50px auto;
}

.information {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 150px auto;
  border: 4px solid #333;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .4s ease-in;
  
  &:hover {
    border-color: $blue;
    span {
      background: $blue;
    }
  }

  span {
    content:"";
    background: #333;
    position: absolute;
    transition: all .4s ease-in-out;
    &:nth-child(1) {
      transform: translateX(-50%);
      left: 50%;
      border-radius: 50%;
      width: 6px;
      height: 6px;
      top: 6px;
    }
    &:nth-child(2) {
      transform: translateX(-50%);
      left: 50%;
      top : 15px;
      width: 4px;
      height: 18px;
      border-radius: 2px;
    }
  }
}

.is-clicked {
  &:hover {
    border-color: $red;
    span {
      background: $red;
    }
  }
  span {
    &:nth-child(1) {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 4px;
      height: 24px;
      border-radius: 2px;
    }
    &:nth-child(2){
      top: 50%;
      left: 50%;
      width: 4px;
      height: 24px;
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }
}

.dialog {
  padding: 5px 15px;
  border: 4px solid #333;
  border-radius: 10px;
  position: absolute;
  left: 60px;
  top: -125px;
  width: 200px;
  &:before {
    content:"";
    border: 4px solid #333;
    border-top: none;
    border-right: none;
    background: $background;
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    transform: rotate(-45deg);
    bottom: -12px;
    left: 47px;
  }
  p{
    font-weight: 600;
  }
}

.out {
  animation: outAnimation forwards .6s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: outAnimation forwards .6s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: outAnimation forwards .6s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: outAnimation forwards .6s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: outAnimation forwards .6s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes outAnimation{
  0% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00);
    left: 60px;
    top: -125px;
  }
  25% {
    opacity:1;
    transform:  scaleX(0.95) scaleY(0.95);
    left: 60px;
    top: -125px;
  }
  50% {
    opacity:1;
    transform:  scaleX(1.10) scaleY(1.10);
    left: 60px;
    top: -125px;
  }
  100% {
    opacity:0;
    transform:  scaleX(0.30) scaleY(0.30);
    left: 20px;
    top: -80px;
  }
}

@-moz-keyframes outAnimation{
  0% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00);
    left: 60px;
    top: -125px;
  }
  25% {
    opacity:1;
    transform:  scaleX(0.95) scaleY(0.95);
    left: 60px;
    top: -125px;
  }
  50% {
    opacity:1;
    transform:  scaleX(1.10) scaleY(1.10);
    left: 60px;
    top: -125px;
  }
  100% {
    opacity:0;
    transform:  scaleX(0.30) scaleY(0.30);
    left: 20px;
    top: -80px;
  }
}

@-webkit-keyframes outAnimation {
  0% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00);
    left: 60px;
    top: -125px;
  }
  25% {
    opacity:1;
    transform:  scaleX(0.95) scaleY(0.95);
    left: 60px;
    top: -125px;
  }
  50% {
    opacity:1;
    transform:  scaleX(1.10) scaleY(1.10);
    left: 60px;
    top: -125px;
  }
  100% {
    opacity:0;
    transform:  scaleX(0.30) scaleY(0.30);
    left: 20px;
    top: -80px;
  }
}

@-o-keyframes outAnimation {
  0% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00);
    left: 60px;
    top: -125px;
  }
  25% {
    opacity:1;
    transform:  scaleX(0.95) scaleY(0.95);
    left: 60px;
    top: -125px;
  }
  50% {
    opacity:1;
    transform:  scaleX(1.10) scaleY(1.10);
    left: 60px;
    top: -125px;
  }
  100% {
    opacity:0;
    transform:  scaleX(0.30) scaleY(0.30);
    left: 20px;
    top: -80px;
  }
}

@-ms-keyframes outAnimation {
  0% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00);
    left: 60px;
    top: -125px;
  }
  25% {
    opacity:1;
    transform:  scaleX(0.95) scaleY(0.95);
    left: 60px;
    top: -125px;
  }
  50% {
    opacity:1;
    transform:  scaleX(1.10) scaleY(1.10);
    left: 60px;
    top: -125px;
  }
  100% {
    opacity:0;
    transform:  scaleX(0.30) scaleY(0.30);
    left: 20px;
    top: -80px;
  }
}

.in {
  animation: inAnimation forwards .6s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: inAnimation forwards .6s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: inAnimation forwards .6s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: inAnimation forwards .6s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: inAnimation forwards .6s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes inAnimation {
  0% {
    opacity:0;
    transform:  scaleX(0.30) scaleY(0.30);
  }
  25% {
    opacity:1;
    transform:  scaleX(1.10) scaleY(1.10);
  }
  50% {
    opacity:1;
    transform:  scaleX(0.95) scaleY(0.95);
  }
  100% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00);
  }
}

@-moz-keyframes inAnimation {
  0% {
    opacity:0;
    transform:  scaleX(0.30) scaleY(0.30);
  }
  25% {
    opacity:1;
    transform:  scaleX(1.10) scaleY(1.10);
  }
  50% {
    opacity:1;
    transform:  scaleX(0.95) scaleY(0.95);
  }
  100% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00);
  }
}

@-webkit-keyframes inAnimation {
  0% {
    opacity:0;
    transform:  scaleX(0.30) scaleY(0.30);
  }
  25% {
    opacity:1;
    transform:  scaleX(1.10) scaleY(1.10);
  }
  50% {
    opacity:1;
    transform:  scaleX(0.95) scaleY(0.95);
  }
  100% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00);
  }
}

@-o-keyframes inAnimation {
  0% {
    opacity:0;
    transform:  scaleX(0.30) scaleY(0.30);
  }
  25% {
    opacity:1;
    transform:  scaleX(1.10) scaleY(1.10);
  }
  50% {
    opacity:1;
    transform:  scaleX(0.95) scaleY(0.95);
  }
  100% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00);
  }
}

@-ms-keyframes inAnimation {
  0% {
    opacity:0;
    transform:  scaleX(0.30) scaleY(0.30);
  }
  25% {
    opacity:1;
    transform:  scaleX(1.10) scaleY(1.10);
  }
  50% {
    opacity:1;
    transform:  scaleX(0.95) scaleY(0.95);
  }
  100% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00);
  }
}

document.querySelector('.information').addEventListener('click', function(){
  document.querySelector('.information').classList.toggle('is-clicked');
  document.querySelector('.dialog').classList.toggle('out');
  document.querySelector('.dialog').classList.toggle('in');
});