使用 CSS 向左弹跳动画效果

什么是向左弹跳动画效果？

向左弹跳动画效果是一种常见的CSS动画效果，它可以使元素在页面上向左快速移动一段距离后再返回原位置，模拟了一个向左弹跳的效果，常用于为页面增加活力和动感。下面我们来详细讲解如何实现这种动画效果。

实现向左弹跳动画效果的基本原理

向左弹跳动画效果的实现基于CSS3中的动画特性，主要是通过CSS3中的@keyframes关键字定义一个动画序列，然后将这个动画序列绑定到目标元素上即可。

动画序列主要定义了动画的起点、终点和过渡过程，通过对这些属性的调整，可以实现不同的动画效果。在向左弹跳动画中，我们需要定义动画的起点、终点、弹跳点和过渡速度等属性。

如何实现向左弹跳动画效果？

第一步：定义CSS样式

首先，我们需要定义目标元素的基本样式。比如，要实现一个向左弹跳的按钮，可以用如下代码定义：

.btn{
  width: 100px;
  height: 40px;
  background-color: #409EFF;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  line-height: 40px;
}

这里定义了一个宽度为100px，高度为40px，背景颜色为蓝色，圆角为5px，文字为白色，居中对齐的按钮。

第二步：定义动画序列

接下来，我们需要定义动画序列，也就是用@keyframes关键字定义一个动画序列，并且指定关键帧的属性值。

在向左弹跳动画中，主要是通过改变目标元素的transform:translateX()属性值来实现向左移动和弹跳的效果。在动画序列中，我们需要定义以下几个关键帧：

from：设置元素的起始位置

to：设置元素的终止位置

bounce1：设置元素弹跳的第一步

bounce2：设置元素弹跳的第二步

具体的代码如下：

@keyframes left-bounce {
  from { transform: translateX(0); }
  to { transform: translateX(-100px); }
  30% { transform: translateX(-35px) translateY(-20px); }
  50% { transform: translateX(-50px) translateY(0); }
  65% { transform: translateX(-35px) translateY(-10px); }
  80% { transform: translateX(-50px) translateY(0); }
  90% { transform: translateX(-35px) translateY(-5px); }
  to { transform: translateX(0); }
}

这里的left-bounce是动画名称，可以自定义。在定义动画序列时，我们需要指定目标元素的transform:translateX()属性为一个具体的值，比如0、-100px等。其中，0表示目标元素的起始位置，-100px表示目标元素的终止位置。

接下来，我们需要指定关键帧的具体属性值。30%、50%、65%、80%和90%表示目标元素的弹跳过程中出现的关键帧，需要根据实际需要调整这些数值。其中，transform:translateX()定义了目标元素向左移动的距离，transform:translateY()定义了目标元素向上弹跳的高度。

第三步：绑定动画序列

最后一步，我们需要将定义好的动画序列绑定到目标元素上。这可以通过定义一个CSS类，并且将动画序列作为这个类的样式属性来实现，具体代码如下：

.bounce{
  animation: left-bounce 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

这里定义了一个名为bounce的CSS类，并将动画序列left-bounce作为它的样式属性。其中，animation设置了动画的名称和持续时间，animation-timing-function定义了动画的过渡速度，animation-fill-mode设置了动画结束后目标元素的状态，这里设置为forwards表示保持动画结束时的最后一个状态。

第四步：制作弹跳按钮

最后，我们将以上三步结合起来，可以实现一个向左弹跳的按钮。具体代码如下：

.btn{
  width: 100px;
  height: 40px;
  background-color: #409EFF;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
@keyframes left-bounce {
  from { transform: translateX(0); }
  to { transform: translateX(-100px); }
  30% { transform: translateX(-35px) translateY(-20px); }
  50% { transform: translateX(-50px) translateY(0); }
  65% { transform: translateX(-35px) translateY(-10px); }
  80% { transform: translateX(-50px) translateY(0); }
  90% { transform: translateX(-35px) translateY(-5px); }
  to { transform: translateX(0); }
}
.bounce{
  animation: left-bounce 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

这里定义了一个名为.btn和.bounce的CSS类，分别定义了按钮的基本样式和弹跳效果，通过给按钮添加.bounce类，即可实现向左弹跳的效果。

总结

向左弹跳动画效果是一种常见的动画效果，通过CSS3中的动画特性可以很方便地实现。在实现动画效果时，需要定义目标元素的基本样式和动画序列，然后将动画序列绑定到目标元素上即可。通过调整动画序列中的关键帧属性，可以实现不同的动画效果。