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;
}

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

.gen { float: left; position: relative; }

}

/* ---  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;
}