JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="blink_me border">
  <div class="header red">Header</div> 
  <div class="body"> Body </div>
</div>

CSS

.blink_me {animation: blinker .7s step-start 1, slide .7s ease-in 1; }

.border{border: 1px solid red; width:100px; height:100px; overflow: hidden;}

.header{height: 20px; width:100%; color:white;}

.red{ background-color: red;}
.blue{ background-color: blue;}

@keyframes blinker {  
  10% { opacity: 1.0; }
  15% { opacity: 0.0; }
  20% { opacity: 1.0; }
  25% { opacity: 0.0; }
  40% { opacity: 1.0; }
  50% { opacity: 1.0; }
  60% { opacity: 0.3; }
  65% { opacity: 1.0; }
  70% { opacity: 0.5; }
  75% { opacity: 1.0; }
  80% { opacity: 0.4; }
  85% { opacity: 1.0; }
  87% { opacity: 0.3; }
  90% { opacity: 1.0; }
  95% { opacity: 0.8; }
  100% { opacity: 1.0; }
}
@keyframes slide{
  0%{height: 20px; width: 1px;}
  50%{height: 20px;width: 100px}
  50%{height: 20px;width: 100px}
  100%{height: 100px; width: 100px;}
}

JavaScript

setTimeout(myFunction, 2000);

function myFunction(){
	
}