<div class="container">
  <h1>Animating CSS Masks: Works in Webkit, but not in Firefox or IE</h1>

  <p>CSS Mask Animation</p>

  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg">

  <div class="button-wrapper">
    <button>Animate</button>
  </div>
</div>
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  background-color: aliceblue;
  color: white;
}

.container {
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
  color: lightskyblue
}

img {
  position: relative;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  z-index: 1;
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/alpha-star.png) 50% 10% / 80% no-repeat;
}

p {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  font-size: 46px;
  text-align: center;
  z-index: 2;
  font-weight: 800;
  color: lightseagreen;
  opacity: 0;
  transition: opacity 0.5s ease-in-out 1.5s;
  mix-blend-mode: screen;
}


/* add this class to make paragraph visible on the mask */

.visible {
  opacity: 1;
  visibility: visible;
}

.button-wrapper {
  padding: 2em;
  text-align: center;
  position: relative;
  top: 0;
  z-index: 10;
}

.button-wrapper button {
  text-transform: uppercase;
  font-weight: 800;
  background-image: none;
  padding: 1em;
  cursor: pointer;
  background-color: transparent;
  color: lightseagreen;
  border: 2px solid lightseagreen;
}


/* add this class to animate mask position and size and rotate it */

.animate {
  transform: rotate(360deg);
  animation: move 0.5s ease;
}


/* CSS animation */

@keyframes move {
  0% {
    mask-position: 0 0;
    mask-size: 30%;
    transform: rotate(10deg);
  }
  100% {
    mask-position: 50% 10%;
    mask-size: 100% 80%;
    mask-size: 80%;
    transform: rotate(360deg);
  }
}
//store elements in variables
var mask = document.querySelector('img'),
  paragraph = document.querySelector('p'),
  btn = document.querySelector('button');

//add event listener to animate button to add the relevant CSS classes to the appropriate elements to animate them
btn.addEventListener('click', function(e) {
  e.preventDefault();
  mask.classList.add('animate');
  paragraph.classList.add('visible');
}, false);

//remove animation classes 
function removeAnimation(elem, animClass) {
  elem.classList.remove(animClass);
}
mask.addEventListener('animationend', function() {
  removeAnimation(this, 'animate');
}, false);

//remove class that transitions the paragraph after transition ends
paragraph.addEventListener('transitionend', function() {
  removeAnimation(this, 'visible');
}, false);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.