Css3 Animation 动画原则二

<h1>Principle 2: Anticipation</h1>
<h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2>
<article class="principle two">
   <div class="shape"></div>
   <div class="surface"></div>
</article>

.two .shape {
 animation: two 5s infinite ease-out;
 transform-origin: 50% 7em;
}

.two .surface {
 background: #000;
 width: 8em;
 height: 1em;
 position: absolute;
 top: calc(50% + 4em);
 left: calc(50% - 3em);
}

@keyframes two {
 0%, 15% {
   opacity: 0;
   transform: none;
 }
 15%, 25% {
   opacity: 1;
   transform: none;
   animation-timing-function: cubic-bezier(.5,.05,.91,.47);
 }
 28%, 38% {
   transform: translateX(-2em);
 }
 40%, 45% {
   transform: translateX(-4em);
 }
 50%, 52% {
   transform: translateX(-4em) rotateZ(-20deg);
 }
 70%, 75% {
   transform: translateX(-4em) rotateZ(-10deg);
 }
 78% {
   transform: translateX(-4em) rotateZ(-24deg);
   opacity: 1;
 }
 86%, 100% {
   transform: translateX(-6em) translateY(4em) rotateZ(-90deg);
   opacity: 0;
 }
}

/* General styling */
body {
 margin: 0;
 background: #e9b59f;
 font-family: HelveticaNeue, Arial, Sans-serif;
 color: #fff;
}

h1 {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 text-align: center;
 font-weight: 300;
}

h2 {
 font-size: 0.75em;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 text-align: center;
}

a {
 text-decoration: none;
 color: #333;
}

.principle {
 width: 100%;
 height: 100vh;
 position: relative;
}

.shape {
 background: #2d97db;
 border: 1em solid #fff;
 width: 4em;
 height: 4em;
 position: absolute;
 top: calc(50% - 2em);
 left: calc(50% - 2em);
}