JSFiddle - React, Tailwind, and code Playground

by avgustre

HTML

<div class="picture animated">

</div>

CSS

.picture {
  /* background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); */
  display: inline-block;
  vertical-align: top;
  border: 5px solid red;
  width: 250px;
  height: 250px;
  background-size: 100% 100%;
  border-radius: 100%;
  animation: turns 1s infinite;
}

.animated {
}

@keyframes turns {
  0% {
    background: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png');
  }
  1% {
    background: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png');
  }
  50% {
    background: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png');
  }
  51% {
    background: url('http://i3.mirror.co.uk/incoming/article172940.ece/alternates/s615/image-16-jim-carrey-50th-birthday-604638636.jpg');
  }
  100% {
    background: url('http://i3.mirror.co.uk/incoming/article172940.ece/alternates/s615/image-16-jim-carrey-50th-birthday-604638636.jpg');
  }
}