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.


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

@keyframes pulse {
  0%,to {
    opacity: 0.5;
  30% {
    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.


Leave a Reply

Your email address will not be published. Required fields are marked *