Pulse Animation

by Keith Jeter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="gen animateddd infinite pulseee">
  <img alt="Master Blademen" src="http://galnova.com/A16/blademen.png" />
</div>

CSS

.gen { position: absolute; left: calc(10% - 25px); }

.gen > img {
  width: 100%;
  height: 100%;
  max-width: 793px;
  min-width: 280px;
  max-height: 861px;
  min-height: 300px;
}

.ctxt {
  font-family: 'Catamaran', sans-serif;
  font-weight: 400;
  display: block;
}

.ctxt span b { font-weight: 800; }

.content_block_1 {
  background: #ffed51;
  width: 90%;
  height: 700px;
  margin: 5%;
  border: solid 3px #000;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.content_block_1 span {
  margin-top: 25%;
  padding-right: 10px;
  float: right; 
  font-size: 22px;
  text-align: center;
}

.content_block_2 { display: none; }
  
@media (min-width: 100px) and (max-width: 650px) { 

.content_block_1 { max-height: 400px; }

}  

@media (min-width: 100px) and (max-width: 500px) {

.gen { float: left; position: relative; }
.content_block_1 { display: none; }
.content_block_2 { display: block; }
.content_block_2 span { text-align: center; }

}

/* ---  animation.css overrides  --- */

.animateddd {
    -webkit-animation-duration: 14s;
    animation-duration: 14s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes pulseee {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        -moz-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulseee {
    -webkit-animation-name: pulseee;
		-moz-animation-name: pulseee;
    animation-name: pulseee;
}