.card
  .box
    .fill(data-animation-name="zoom-in")
  p zoom in
 
.card
  .box
    .fill(data-animation-name="zoom-out")
  p zoom out
  
.card
  .box
    .fill(data-animation-name="box-zoom")
  p zoom 
View Compiled
body {
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

h1{
  color: #4c4c4c;
  font-weight: 600;
  border-bottom: 6px solid #ccc;
}

h2, h4{
  font-weight: 400;
  color: #4d4d4d;
}

.card {
    display: inline-block;
    margin: 10px;
    background: #fff;
    padding: 15px;
    min-width: 200px;
    box-shadow: 0 3px 5px #ddd ;
    color: #555;
  
  .box {
    width: 100px;
    height: 100px;
    margin: auto;
    background: #ddd;
    cursor: pointer;
    box-shadow: 0 0 5px #ccc inset;
   
    .fill {
      width: 100px;
      height: 100px;
      position: relative;
      background: #03A9F4;
      opacity: .5;
      box-shadow: 0 0 5px #ccc;
      transition: .3s;
    } 
  }
  
  p {
    margin:25px 0 0;
  }
}

.zoom-out {
  animation: zoom-out 3s infinite;
}

@keyframes zoom-out {
  0% {transform: scale(1);}
  50% {transform: scale(2);}
}

.zoom-in {
  animation: zoom-in 3s infinite;
}

@keyframes zoom-in {
  0% {transform: scale(0);}
  100% {transform: scale(1);}
}

.box-zoom {
  animation: box-zoom 3s infinite;
}

@keyframes box-zoom {
  0% {transform: scale(1);}
  100% {transform: scale(0);}
}
View Compiled
$(document).ready(function() {
  $(".fill").click(function() {
    var elemData = $(this).attr("data-animation-name")
    $(this).toggleClass(elemData)
  })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js