sample: CSS animation

by sii_side

HTML

<div id="box1">
  <div id="box2">
  </div>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
}

#box1 {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: black;
  animation-name: myanimation;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

#box2 {
  border-radius: 100px 0px 50px 50px / 100px 0px 0px 0px;
  width: 50px;
  height: 50px;
  background: yellow;
}

div {
  width: 100px;
  height: 100px;
}

@keyframes myanimation {
  45% {
    transform: translate(700px, 0px) rotate(360deg);
  }
  50% {
    transform: translate(0px, 500px) rotate(720deg);
  }
  95% {
    transform: translate(700px, 500px) rotate(1080deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(1440deg);
  }
}