目录:1、弹跳动画
2、闪动成果
3、打字动画
4、状态平滑的动画
1、缓动成果
问题形容:回弹成果是指当一个过渡达到最终值时,往回倒一点,而后再次回到最终值,如此往返一次或屡次,并逐步收敛,最终稳固在最终值,目前有很多 JS 类库是内置回弹成果的,然而用纯 CSS 如何实现呢?
最根本的实现依附的是 CSS 动画,并设置关键帧,就能实现最简略的弹跳动画成果。
@keyframes bounce {
60%,
80%,
to {transform: translateY(350px);
}
70% {transform: translateY(250px);
}
90% {transform: translateY(300px);
}
}
然而这样产生的成果十分不实在,因为每次小球改变方向的时候速度是继续减速的,很不天然,这波及到动画的默认速度成果,它的速度曲线如下图所示:
初始加速度很高,动画前面的加速度反而平缓,这跟弹跳比拟平均的速度曲线有矛盾。不过咱们能够通过设置 animation 的属性扭转这种曲线,通过设置 animation-timing-function 能取得齐全不同的动画速度曲线。
animation-timing-function: ease-out;
能够显著看出弹跳成果更加符合实际。
2、闪动成果
问题形容:有一种常见的用户体验设计手法,就是通过数次闪动来提醒用户界面中有某处产生了变动,或者用来凸显出以后链接的指标。因此闪动动画成果的实现是有必要的。
用 CSS 动画的确能够实现各种类型的闪动成果,比方对整个元素进行闪动(通过 opacity 属性),对文字的色彩进行闪动(通过 color 属性),对边框进行闪动(通过 border-color 属性)等等。在上面的内容中,咱们将只探讨文字的闪动成果,因为这是最常见的需要。
如:我当初须要让一段文字实现闪动成果
@keyframes blink-smooth {to { color: transparent} }
.highlight {animation: 1s blink-smooth 3;}
这样就能根本实现了,然而有个问题,文字能够平滑的从原来的色彩淡化为通明色,然而起初却僵硬地跳回原来的色彩,且色彩的淡去和浮现有显著的减速成果,所以咱们还要进行肯定的改良。这里应用 animation-direction 属性管制是否应该轮流反向播放动画
animation: .5s blink-smooth 6 alternate;
通过这个使隐去的动画重复播放六次,实现闪动成果,这样就是实现平滑的闪动成果了。
3、打字动画
问题形容:有些时候,咱们心愿一段文本中的字符一一浮现,模拟出一种打字的成果。这种成果用纯 CSS 的形式如何实现呢
其实根本的原理就是让盒子的宽度用动画逐渐展示,对盒子内的文字设置不换行且暗藏超出盒子宽度的内容,从而实现文字的逐渐展示,也就是打字动画。
<h1>CSS is awesome</h1>
@keyframes typing {
from {width: 0;}
}
h1 {
width: 8.1em;
animation: typing 8s;
white-space: nowrap;
overflow: hidden;
}
这样就能实现上面的根本成果:
最初,加上光标的成果
@keyframes caret {
50% {border-color: transparent;}
}
4、状态平滑的动画
问题形容:通过动画来响应用户的动作,比方用户的鼠标悬停在某个元素上,在这种场景下,咱们将无法控制动画理论的循环次数,因为用户的动作会随时中断动画,而此时动画不可能刚好插放到咱们当时指定的循环次数。这个时候动画只会僵硬的跳回初始的状态,这十分影响用户的体验。
咱们须要让动画在用户交互动作(如:hover)完结时,不是僵硬的跳回动画的初始页面,而是保留以后动画的进度,期待下次交互的时候持续动画,这里以一张全景图片的展现动画为例。
咱们须要先展现图片局部裁剪,当鼠标悬停时候,实现展现区域向右挪动的动画成果。
.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%; }
.panoramic:hover, .panoramic:focus {animation: panoramic 10s linear infinite alternate;}
这样能根本实现,然而存在下面形容的问题,用户交互完结后的不平滑。咱们须要的不是交互时候记住以后动画状态,而是能暂停以后动画,等下次交互时再开始。
通过 animation-play-state:pause/running 就能实现动画的暂停和复原,于是批改代码。
@keyframes panoramic {to { background-position: 100% 0;}
}
.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
animation-play-state: paused;
}
.panoramic:hover, .panoramic:focus {animation-play-state: running;}
实现平滑的动画成果。