Animating the Play Button

Animating triangle

.video-js .vjs-big-play-button:before {
  animation: pulse-border 1500ms ease-out infinite;
}
@keyframes pulse-border {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

This will make the inner play triangle animate (increase in size and fade). There are a few options here… you can set the length of the animation by changing the 1500ms to a different number. You can change the animation timing to any of the following: linear, ease, ease-in, ease-out, ease-in-out. You can change the scale of size to a different number instead of 1.5. Try removing the “:before” and the whole button will animate.

Heartbeat

.video-js .vjs-big-play-button {
  animation: pulse 1000ms ease infinite;
}

@keyframes pulse {
  0%,to {
    -webkit-transform:scale(1);
    transform:scale(1);
    opacity: 0.5;
  }
  30% {
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    opacity: 1;
  }
}

The above animation will make the play button act like a heart beat. Experiment with the numbers and adjust as necessary to achieve your vision.

If you still need help with this or have something a little more complex that you are trying to achieve, leave a comment or send me an email.