<div class="blink">ATTENTION</div>
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
div{
  display: inline-block;
  padding: 20px 40px;
  background-color:red;
  color: #fff;
  font-family: 'Roboto Slab', serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 4px;
}
.blink {
  animation-name: blinker;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1.0,2.0,0,1.0);
  animation-duration: 1s;
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(1.0,2.0,0,1.0);
  -webkit-animation-duration: 1s;
}
 
@keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}
 
@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.