*,
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
* {
  -webkit-transition: 100ms all linear;
  transition: 100ms all linear;
  backface-visibility: hidden;
}
body {
  position: relative;
  margin: 0 auto;
  padding: 5%;
  text-align: center;
}
section { 
  position: relative; width: 30%; height: 350px; display: inline-block; }
section img { width: 100%; height: auto;}
aside { 
  border-top: 5px solid green;
  padding: 20px;
  background: #FFF;
  box-shadow: 0 0 5px;
}
aside, aside.blank { float: right; }
aside.blank { background: transparent; }

#option1 .banner_alert  {
  position: absolute;
  top: 50px;
  right: 0;
  opacity: 0;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 500s;
  animation: slide 0.5s forwards;
  animation-delay: 500ms;
}
#option1 .banner_alert.banner-note {
  -webkit-animation: slideout 0.5s forwards;
  animation: slideout 0.5s forwards;
}

#option2 .banner_alert  {
  position: absolute;
  top: 25px;
  right: 0;
  opacity: 0;
  -webkit-animation: slidedown 0.5s forwards;
  -webkit-animation-delay: 500s;
  animation: slidedown 0.5s forwards;
  animation-delay: 500ms;
}
#option2 .banner_alert.banner-note {
  -webkit-animation: slideup 0.5s forwards;
  animation: slideup 0.5s forwards;
}

@-webkit-keyframes slide { 100% { right: 50px; opacity: 1; } }
@keyframes slide { 100% { right: 50px; opacity: 1;} }
@-webkit-keyframes slideout { 
  0% { right: 50px; opacity: 1; }
  100% { right: 0px; opacity: 0; } 
}
@keyframes slideout { 
  0% { right: 50px; opacity: 1; }
  100% { right: 0px; opacity: 0;} 
}

@-webkit-keyframes slidedown { 100% { top: 60px; opacity: 1; } }
@keyframes slidedown { 100% { top: 60px; opacity: 1;} }

@-webkit-keyframes slideup { 
  0% { top: 60px; opacity: 1; }
  100% { top: 60px; opacity: 0; } 
}
@keyframes slideup { 
  0% { top: 60px; opacity: 1; }
  100% { top: 30px; opacity: 0;} 
}