預(yù)備動作 (Anticipation)
預(yù)備動作
運動不傾向于突然發(fā)生扫尺。在現(xiàn)實生活中蔗草,無論是一個球在掉到桌子前就開始滾動,或是一個人屈膝準(zhǔn)備起跳叙凡,運動通常有著某種事先的累積劈伴。
我們能用它去讓我們的過渡動畫顯得更逼真。預(yù)備動作可以是一個細(xì)微的反彈,幫人們理解什么對象將在屏幕中發(fā)生變化并留下痕跡跛璧。
例如严里,懸停在一個元件上時可以在它變大前稍微縮小,在初始列表中添加額外的條目來介紹其它條目的移除方法追城。
HTML
<h1>Principle 2: Anticipation</h1>
<h2><a 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先森】后臺回復(fù)【190315】獲取【Css 參考規(guī)范】座柱,可以轉(zhuǎn)發(fā)朋友圈和你的朋友分享哦迷帜。