<svg>
	<mask id="mask">
        <rect width="100%" height="100%"/>
		<circle r="100" cx="100" cy="100"
            class="c-mask-circle"/>
	</mask>
  
  <clipPath id="clip-path">
		<circle r="10" cx="100" cy="100"
			class="c-cp-circle"/>
	</clipPath>
  
  <g clip-path="url(#clip-path)" >
  	<image 
       xlink:href="https://img-fotki.yandex.ru/get/4301/yoksel.51/0_3b50c_c6d45e3c_L"   
       width="500" height="333"/>
  </g>
  
  <g mask="url(#mask)">
  	<image 
       xlink:href="https://img-fotki.yandex.ru/get/4300/yoksel.51/0_3b509_b99080b3_L" 
       width="500" height="333"/>
  </g>  
</svg>
svg {
  display: block;
  width: 200px;
  height: 200px;
  margin: 2em auto;
}
.c-cp-circle {
  transform-origin: 100px 100px;
  animation: scale 5s infinite;
}

@keyframes scale {
  50% {
    transform: scale(10);
  }
}

.c-mask-circle {
  fill: white;
  stroke: black;
  stroke-width: 180;
  animation: stroke-width 5s infinite;

}

@keyframes stroke-width {
  50% {
    stroke-width: 1;
  }
}
View Compiled
// Animated mask for FF and webkittens

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.