.rosette-animation {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
}
.rosette {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 150px;
  height: 150px;
}
.fixed {
  z-index: 1;
}
.transforming {
  z-index: 2;
  opacity: 0.75;
  transform-origin: 50% 50%;
}
.c5 {}
.c4 {}
.d2 {}
.rosette-animation:hover .rosette.c4 {
  animation: rotateC4 4s infinite;
  animation-timing-function: cubic-bezier(0.6, 1, 0.4, 1);
}
.rosette-animation:hover .rosette.c5 {
  animation: rotateC5 5s infinite;
  animation-timing-function: cubic-bezier(0.6, 1, 0.4, 1);
}
.rosette-animation:hover .rosette.d1 {
  animation: reflectD1 2s infinite;
  animation-timing-function: cubic-bezier(0.6, 1, 0.4, 1);
}
.rosette-animation:hover .rosette.d5 {
  animation: rotateAndReflectD5 7.5s infinite;
  animation-timing-function: cubic-bezier(0.6, 1, 0.4, 1);
}
.rosette-animation:hover .rosette.d8 {
  animation: rotateAndReflectD8 12s infinite;
  animation-timing-function: cubic-bezier(0.6, 1, 0.4, 1);
}	
.overlay {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rosette-animation:hover .overlay {
  opacity: 1;
}
@keyframes rotateC4 {
  0%   { transform: rotate(0deg); }
  5%  { transform: rotate(0deg); }
  25%  { transform: rotate(-90deg); }
  30%  { transform: rotate(-90deg); }
  50%  { transform: rotate(-180deg); }
  55%  { transform: rotate(-180deg); }
  75%  { transform: rotate(-270deg); }
  80%  { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes rotateC5 {
  0%   { transform: rotate(0deg); }
  5%  { transform: rotate(0deg); }
  20%  { transform: rotate(-72deg); }
  25%  { transform: rotate(-72deg); }
  40%  { transform: rotate(-144deg); }
  45%  { transform: rotate(-144deg); }
  60%  { transform: rotate(-216deg); }
  65%  { transform: rotate(-216deg); }
  80%  { transform: rotate(-288deg); }
  85%  { transform: rotate(-288deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes reflectD1 {
  0%   { transform: scaleX(1); }
  25%  { transform: scaleX(-1); }
  50%  { transform: scaleX(-1); }
  75% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@keyframes rotateAndReflectD5 {
  0%   { transform: rotate(0deg) scaleX(1); }
  10%  { transform: rotate(-72deg) scaleX(1); }
  20%  { transform: rotate(-72deg) scaleX(-1); }
  30%  { transform: rotate(-144deg) scaleX(-1); }
  40%  { transform: rotate(-144deg) scaleX(1); }
  50%  { transform: rotate(-216deg) scaleX(1); }
  60%  { transform: rotate(-216deg) scaleX(-1); }
  70%  { transform: rotate(-288deg) scaleX(-1); }
  80%  { transform: rotate(-288deg) scaleX(1); }
  90%  { transform: rotate(-360deg) scaleX(1); }
  100% { transform: rotate(-360deg) scaleX(1); }
}
@keyframes rotateAndReflectD8 {
  0%      { transform: rotate(0deg) scaleX(1); }
  6.25%   { transform: rotate(-45deg) scaleX(1); }
  12.5%   { transform: rotate(-45deg) scaleX(-1); }
  18.75%  { transform: rotate(-90deg) scaleX(-1); }
  25%     { transform: rotate(-90deg) scaleX(1); }
  31.25%  { transform: rotate(-135deg) scaleX(1); }
  37.5%   { transform: rotate(-135deg) scaleX(-1); }
  43.75%  { transform: rotate(-180deg) scaleX(-1); }
  50%     { transform: rotate(-180deg) scaleX(1); }
  56.25%  { transform: rotate(-225deg) scaleX(1); }
  62.5%   { transform: rotate(-225deg) scaleX(-1); }
  68.75%  { transform: rotate(-270deg) scaleX(-1); }
  75%     { transform: rotate(-270deg) scaleX(1); }
  81.25%  { transform: rotate(-315deg) scaleX(1); }
  87.5%   { transform: rotate(-315deg) scaleX(-1); }
  93.75%  { transform: rotate(-360deg) scaleX(-1); }
  100%    { transform: rotate(-360deg) scaleX(1); }
}