@keyframes openAnimate {
  to {
    -webkit-transform: rotate(360deg);
    -webkit-transform-origin: top right;
    -moz-transform: rotate(360deg);
    -moz-transform-origin: top right;
    -ms-transform: rotate(360deg);
    -ms-transform-origin: top right;
    -o-transform: rotate(360deg);
    -o-transform-origin: top right;
    transform: rotate(360deg);
    transform-origin: top right;
  }
}

.demo {
display:inline-block;
  width: 22px;
  height: 22px;
  margin: 30px auto 0;
  position: relative;
  left:0.5%;
  
  -webkit-transform: rotate(135deg);
  -webkit-transform-origin: center center;
  -moz-transform: rotate(135deg);
  -moz-transform-origin: center center;
  -ms-transform: rotate(135deg);
  -ms-transform-origin: center center;
  -o-transform: rotate(135deg);
  -o-transform-origin: center center;
  transform: rotate(135deg);
  transform-origin: center center;
}
.demo .leaf {
  width: 15px;
  height: 15px;
  border-radius: 15px 0px;
  background: linear-gradient(45deg, #bcbec0 8%, #9e1f63 30%, #9e1f63 100%);
  opacity: 0.6;
  filter: alpha(opacity=60);
  position: absolute;
  margin-top: 20px;
  -webkit-animation: openAnimate 6s ease-in-out infinite alternate;
  -moz-animation: openAnimate 6s ease-in-out infinite alternate;
  -o-animation: openAnimate 6s ease-in-out infinite alternate;
  animation: openAnimate 6s ease-in-out infinite alternate;
}
.demo .leaf:nth-child(10n + 10) {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-transform: rotate(540deg);
  -webkit-transform-origin: top right;
  -moz-transform: rotate(540deg);
  -moz-transform-origin: top right;
  -ms-transform: rotate(540deg);
  -ms-transform-origin: top right;
  -o-transform: rotate(540deg);
  -o-transform-origin: top right;
  transform: rotate(540deg);
  transform-origin: top right;
}
.demo .leaf:nth-child(10n + 9) {
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
  -o-animation-delay: 0.9s;
  animation-delay: 0.9s;
  -webkit-transform: rotate(504deg);
  -webkit-transform-origin: top right;
  -moz-transform: rotate(504deg);
  -moz-transform-origin: top right;
  -ms-transform: rotate(504deg);
  -ms-transform-origin: top right;
  -o-transform: rotate(504deg);
  -o-transform-origin: top right;
  transform: rotate(504deg);
  transform-origin: top right;
}
.demo .leaf:nth-child(10n + 8) {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
  -webkit-transform: rotate(468deg);
  -webkit-transform-origin: top right;
  -moz-transform: rotate(468deg);
  -moz-transform-origin: top right;
  -ms-transform: rotate(468deg);
  -ms-transform-origin: top right;
  -o-transform: rotate(468deg);
  -o-transform-origin: top right;
  transform: rotate(468deg);
  transform-origin: top right;
}
.demo .leaf:nth-child(10n + 7) {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  -o-animation-delay: 0.7s;
  animation-delay: 0.7s;
  -webkit-transform: rotate(432deg);
  -webkit-transform-origin: top right;
  -moz-transform: rotate(432deg);
  -moz-transform-origin: top right;
  -ms-transform: rotate(432deg);
  -ms-transform-origin: top right;
  -o-transform: rotate(432deg);
  -o-transform-origin: top right;
  transform: rotate(432deg);
  transform-origin: top right;
}
.demo .leaf:nth-child(10n + 6) {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
  -webkit-transform: rotate(396deg);
  -webkit-transform-origin: top right;
  -moz-transform: rotate(396deg);
  -moz-transform-origin: top right;
  -ms-transform: rotate(396deg);
  -ms-transform-origin: top right;
  -o-transform: rotate(396deg);
  -o-transform-origin: top right;
  transform: rotate(396deg);
  transform-origin: top right;
}
.demo .leaf:nth-child(10n + 5) {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-transform: rotate(360deg);
  -webkit-transform-origin: top right;
  -moz-transform: rotate(360deg);
  -moz-transform-origin: top right;
  -ms-transform: rotate(360deg);
  -ms-transform-origin: top right;
  -o-transform: rotate(360deg);
  -o-transform-origin: top right;
  transform: rotate(360deg);
  transform-origin: top right;
}
.demo .leaf:nth-child(10n + 4) {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
  -webkit-transform: rotate(324deg);
  -webkit-transform-origin: top right;
  -moz-transform: rotate(324deg);
  -moz-transform-origin: top right;
  -ms-transform: rotate(324deg);
  -ms-transform-origin: top right;
  -o-transform: rotate(324deg);
  -o-transform-origin: top right;
  transform: rotate(324deg);
  transform-origin: top right;
}
.demo .leaf:nth-child(10n + 3) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-transform: rotate(288deg);
  -webkit-transform-origin: top right;
  -moz-transform: rotate(288deg);
  -moz-transform-origin: top right;
  -ms-transform: rotate(288deg);
  -ms-transform-origin: top right;
  -o-transform: rotate(288deg);
  -o-transform-origin: top right;
  transform: rotate(288deg);
  transform-origin: top right;
}
.demo .leaf:nth-child(10n + 2) {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-transform: rotate(252deg);
  -webkit-transform-origin: top right;
  -moz-transform: rotate(252deg);
  -moz-transform-origin: top right;
  -ms-transform: rotate(252deg);
  -ms-transform-origin: top right;
  -o-transform: rotate(252deg);
  -o-transform-origin: top right;
  transform: rotate(252deg);
  transform-origin: top right;
}
.demo .leaf:nth-child(10n + 1) {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  animation-delay: 0.1s;
  -webkit-transform: rotate(216deg);
  -webkit-transform-origin: top right;
  -moz-transform: rotate(216deg);
  -moz-transform-origin: top right;
  -ms-transform: rotate(216deg);
  -ms-transform-origin: top right;
  -o-transform: rotate(216deg);
  -o-transform-origin: top right;
  transform: rotate(216deg);
  transform-origin: top right;
}