.item3 {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background-color: #0aa;
  border-radius: 25px;
}
.item31 { animation: move3 2s step-start 1s infinite; }
.item32 { animation: move3 2s steps(3, start) 1s infinite; }
.item33 { animation: move3 2s steps(3, end) 1s infinite; }
.item34 { animation: move3 2s steps(30, start) 1s infinite; }
@keyframes move3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(200px, 0);
    background-color: red;
  }
  100% {
    transform: translate(552px, 0);
    background-color: orange;
  }
}

.box4 p {
  text-align: left;
  border-bottom: 1px solid #eee;
}
.item4 {
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 30px;
  background-color: #0aa;
  border-radius: 25px;
}
.item41 { animation: move4 2s ease 1s infinite normal; }
.item42 { animation: move4 2s ease 1s infinite alternate; }
.item43 { animation: move4 2s ease 1s infinite reverse; }
.item44 { animation: move4 2s ease 1s infinite alternate-reverse; }
@keyframes move4 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(552px, 0);
    background-color: orange;
  }
}

.box5 p {
  text-align: left;
  border-bottom: 1px solid #eee;
}
.item5 {
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 30px;
  background-color: #0aa;
  border-radius: 25px;
}
.item51 { animation: move5 2s ease 1s 2; }
.item52 { animation: move5 2s ease 1s 2 forwards; }
.item53 { animation: move5 2s ease 1s 2 reverse forwards; }
.item54 { animation: move5 2s ease 1s 2 backwards; }
.item55 { animation: move5 2s ease 1s 2 reverse backwards; }
.item56 { animation: move5 2s ease 1s 2 both; }
@keyframes move5 {
  0% {
    transform: translate(0, 0);
    background-color: red;
  }
  100% {
    transform: translate(552px, 0);
    background-color: orange;
  }
}

.box6 {
  perspective: 640px;
  perspective-origin: 50% 50%;
}
.item6 {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 20px auto;
  transform-style: preserve-3d;
  transition: all 1s ease;
  animation: random-rotate 5s linear 0s infinite;
}
.item6_face {
  width: 200px;
  height: 200px;
  background: rgba(0,160,160,0.3);
  position: absolute;
  font-size: 180px;
  color: #fff;
  line-height: 200px;
  text-align: center;
  border: 1px solid white;
}
.item6_face2 {
  transform: rotateY(-90deg);
  transform-origin: right;
}
.item6_face3 {
  transform: translateZ(-200px);
  transform-origin: right;
}
.item6_face4{
  transform: rotateY(90deg);
  transform-origin: left;
}
.item6_face5{
  transform: rotateX(-90deg);
  transform-origin: top;
}
.item6_face6{
  transform: rotateX(90deg);
  transform-origin: bottom;
}
@keyframes random-rotate{
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}