In this little project we take a box and have it pulse a few times and then return to normal.

What are some ideas you have for using this kind of animation?

/* Here is the CSS code for the Branding and Look section */

/* Pulsing Box*/
#box {
    width: 25px;
    height: 25px;
    margin: 20px;
    background-color: #0000ff;
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes pulse {
  25% {transform: scale(1.5, 1.5);}
  30% {transform: scale(1.25, 1.25);}
  35% {transform: scale(1.5, 1.5);}
  40% {transform: scale(1.25, 1.25);}
  45% {transform: scale(1.5, 1.5);}
  60% {transform: scale(1.25, 1.25);}
  65% {transform: scale(1.5, 1.5);}
  70% {transform: scale(1.25, 1.25);}
  75% {transform: scale(1.5, 1.5);}
  100% {transform: scale(1, 1);}
}

<!-- Here is the HTML for your widget -->
<!-- This one is as basic as it gets. -->

<div>
<div id="box">
</div>
</div>

As always - change it up however you see fit for your project.