css3字体弹跳动画_如何使用CSS3动画创建弹跳效果

今天，我们将使用CSS3动画进行实验。 在上一篇文章中，我们讨论了如何使用CSS3 Animation重新创建“字幕”效果 。 这次，我们将尝试创建一个具有反弹效果的“通知栏”。

因此，让我们开始吧。

• 观看演示

入门

让我们创建一个新HTML文档，并添加以下标记来构造通知栏。

	
Hi, this is a notification and it bounces.

然后，添加一些装饰样式来修饰通知栏。

.css3-notification {
	font-size: .8em;
	text-align: center;
	padding: 10px;
	background-color: #111;
	color: #fff;
	box-shadow:	0px 1px 3px 0px rgba(0, 0, 0, .3);
	text-transform: uppercase;
	position: relative;
	font-weight: bold;
}

在此阶段，这将使我们在浏览器中获得以下结果。

编写CSS3动画关键帧

关于弹跳如何运行的基本思想是，当对象第一次掉落在表面上时，它将在表面上弹起并达到其最高水平。 然后，它随着随后的每次弹跳逐渐到达较低点，直到物体停止弹跳。 下图对此进行了说明。

第1步：创建动画关键帧

现在，让我们开始在样式表中CSS3动画关键帧上进行编写。 在此示例中，我们仅将该关键帧命名为bounce 。

@keyframes bounce {
	
}

请记住，在本教程中，我们将使用W3C的标准@keyframe语法使代码看起来更简单。 但是，为了使动画能在浏览器中正常工作，应包括供应商语法（ -webkit- -o- ， -o- -moz- ， -o- -moz- ），稍后您将在源代码中找到它们。

步骤2：指定初始位置

首先，我们将对象设置为其初始位置的顶部。 在CSS3变换中，我们为Y轴添加负值。 在以下代码段中，我们将位置设置为时间范围的0%到5% 。 因此，通知栏将在该位置停留一会儿。

0% {
	transform:translateY(-100%);
	opacity: 0;
}
5% {
  	transform:translateY(-100%);
    opacity: 0;
}

步骤3：指定第一个跳动

然后，从时间范围的5%到15% ，对象开始移动到其原始位置。 我们将translateY属性设置回0% 。 通常，反弹的物体具有弹性。

当该物体撞击固体物体时，该物体撞击表面的一侧应稍微压缩或变形。 因此，在我们的例子中，我们将padding-bottom从10px减小到5px 。

15% {
	transform:translateY(0);
	padding-bottom: 5px;
}

物体撞击表面后将向上反弹。 此时，对象会在最高点反弹，我们将其设置为在30%的时间范围内达到50% 。

30% {
	transform:translateY(-50%);
}

步骤4：指定第二次弹跳

达到峰值后，物体应回到0位置，换句话说，撞到地面。 该对象的变形将比前一个命中少。 因此，在这一点上，我们将对象的padding-bottom减小到仅6px 。

40% {
  	transform:translateY(0%);
    padding-bottom: 6px;
}

然后它反弹。

这次，它只会到达低于第一个的点； 它从当前位置向上移动30% 。

50% {
	transform:translateY(-30%);
}

第5步：不断弹跳直至停止

这些事件一直重复到时间范围结束为止，以下是动画的其余部分-从时间范围的70％到100％。

70% {
  	transform:translateY(0%);
    padding-bottom: 7px;
}
80% {
	transform:translateY(-15%);
}
90% {
	transform:translateY(0%);
	padding-bottom: 8px;
}
95% {
	transform:translateY(-7%);
}
97% {
	transform:translateY(0%);
	padding-bottom: 9px;
}
99% {
	transform:translateY(-3%);
}
100% {
	transform:translateY(0);
	padding-bottom: 9px;
	opacity: 1;
}

这就是我们现在需要的所有代码，现在您可以从下面的链接查看实际的反弹效果。

• 观看演示
• 下载源

更多资源

以下是深入研究CSS3动画，变换和弹跳效果的良好资源。

• CSS3动画创建高级“字幕” — Hongkiat.com
• CSS3 2D转换 — Hongkiat.com
• 我们用来计算跳动如何工作的所有方程式是什么？ — StackExchange
• jQuery的弹跳效果 — jQuery.com
• CSS3的3D弹跳球 — Codrops

翻译自: https://www.hongkiat.com/blog/css3-bounce-effect/