动画

by 苹果熊

HTML

<div class="ball"></div>
<h1>I heard you like me?</h1>
<div class="loading"></div>
<div class="form">
  <input type="text" id="c1">
  <label for="c1">提示</label>
  <div class="blink1">文字闪烁1</div>
  <div class="blink2">文字闪烁1</div>
  <div class="blink3">文字闪烁1</div>
  <div class="img"></div>
  <div class="path">
    <div class="rotate">
      <img src="http://c1.zdb.io/files/faces/d/4/d49f64444.jpg">
    </div>
  </div>
</div>

CSS

.ball {
  animation: bounce 3s ease-in infinite;
  background: #390;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  margin: auto;
}
@keyframes bounce {
  60%, 80%, to {
    transform: translateY(400px);
    animation-timing-function: ease;
  }
  70% {
    transform: translateY(300px);
  }
  90% {
    transform: translateY(360px);
  }
}
input:not(:focus) + label {
  transform: scale(0);
  transition: transform .3s;
}
label {
  transition: transform .5s cubic-bezier(0.25, 0.1, 0.61, 2.02);
  position: absolute;
  transform-origin: center;
}
.loading {
  width: 50px;
  height: 50px;
  background: url('http://dabblet.com/img/loader.png') 0 0 no-repeat;
  background-size: 400px 50px;
  animation: loading .5s steps(8) infinite;
}
@keyframes loading {
  to {
    background-position: -400px 0;
  }
}
.blink1 {
  padding: 1em;
  background: #390;
  animation: blink1 1s 3;
  color: #fff;
}
@keyframes blink1 {
  50% {
    color: transparent;
  }
}
.blink2 {
  padding: 1em;
  background: #390;
  animation: blink2 .5s 6 alternate;
  color: #fff;
}
@keyframes blink2 {
  to {
    color: transparent;
  }
}
.blink3 {
  padding: 1em;
  background: #390;
  animation: blink3 1s 3 steps(1);
  color: #fff;
}
@keyframes blink3 {
  50% {
    color: transparent;
  }
}
h1 {
  width: 20ch;
  animation: typing 4s steps(20), caret 1s steps(1) infinite;
  white-space: nowrap;
  overflow: hidden;
  border-right: 1px solid transparent;
}
@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes caret {
  50% {
    border-color: currentColor;
  }
}
.img {
  width: 150px;
  height: 150px;
  background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
  background-size: auto 100%;
  animation: move 8s linear infinite alternate;
  animation-play-state: paused;
}
.img:hover {
  animation-play-state: running;
}
@keyframes move {
  to {
    background-position: 100% 0;
  }
}
.path {
  width: 150px;
  height: 150px;
  background: yellowgreen;
  border-radius: 50%;
  padding:...