预备动作 (Anticipation)

预备动作

运动不倾向于突然发生。在现实生活中，无论是一个球在掉到桌子前就开始滚动，或是一个人屈膝准备起跳，运动通常有着某种事先的累积。

我们能用它去让我们的过渡动画显得更逼真。预备动作可以是一个细微的反弹，帮人们理解什么对象将在屏幕中发生变化并留下痕迹。

例如，悬停在一个元件上时可以在它变大前稍微缩小，在初始列表中添加额外的条目来介绍其它条目的移除方法。

HTML

<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>

CSS

.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);
}

—— END ——

看完文章，还有福利拿哦，往下看👇👇👇
感兴趣的小伙伴可以在公号【grain先森】后台回复【190315】获取【Css 参考规范】，可以转发朋友圈和你的朋友分享哦。