%div.container
  %div.item
  
<h1>Trippy CSS effect</h1>
View Compiled
body {
  overflow:hidden;
}

h1 {
  font-family:Arial;
  text-align:center;
  width:100%;
}

.container {
  width:400px;
  height:400px;
  margin-left:calc(50vw - (400px/2));
  margin-top:calc(50vh - (400px/2));
  border:4px solid rgba(0,0,0,.8);
  border-radius:100%;
  padding:10px;
}

.item {
  background:url(https://requestreduce.org/images/letter-outline-clipart-b-6.gif) center;
  background:url(https://akns-images.eonline.com/eol_images/Entire_Site/20141018/rs_560x415-141118090112-1024-mickey-minnie-mouse-kiss.ls.111814.jpg?fit=inside|900:auto&output-quality=90) center;
  background-size:contain;
  background-repeat:no-repeat;
  box-sizing:border-box;
  border:1px solid transparent;
  opacity:0.9;
  width:100%;
  height:100%;
  border-radius:100%;
  animation:blur 3s infinite;
}

.container:hover .item {
  animation:blur2 3s infinite;
}

@keyframes blur {
  0%   { transform:scale(1); }
  25% { transform:scale(1.02); }
  75% { transform:scale(.99); }
  100% { transform:scale(1); }
}

@keyframes blur2 {
  0%   { transform:rotate(0deg) scale(1); }
  50% { transform:rotate(1deg) scale(.99); }
  100% { transform:rotate(0deg) scale(1); }
}
var nrOfElements = 40; //Was 50
var container = document.querySelector('.item');
var previousElement = container;

for(var i=0; i<=nrOfElements; i++) {
  previousElement = addNewElement(previousElement,'item');
}

function addNewElement(parent, className) {
	var element = document.createElement('div');
  element.className = className;
  parent.appendChild(element);
  return element;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.