CSS中实现动画效果-附案例

时间：2023-12-15

下面是关于“CSS中实现动画效果-附案例”的完整攻略：

1.动画效果基础知识

要学会实现CSS动画效果，首先需要了解CSS动画效果的基础知识。CSS3中定义了多种实现动画效果的方式，包括基于关键帧的动画和基于过渡的动画两种方式，下面对这两种方式进行详细说明：

1.1. 基于关键帧的动画

通过CSS3关键帧动画，可以实现在不同时间点上元素所呈现的不同状态，从而形成动画效果。使用关键帧实现动画效果的基本语法如下：

@keyframes 动画名称 {
  from {
    /* 元素起始状态 */
  }

  to {
    /* 元素结束状态 */
  }
}

元素选择器 {
  /* 其他样式属性 */
  animation: 动画名称 动画时长 动画类型;
}

通过上面的代码示例可以看到，我们首先要使用 @keyframes 关键字定义动画名称和起始状态和结束状态，然后使用 animation 属性将动画应用到指定的元素上。其中， animation 属性包含三个参数：动画名称 、 动画时长 和 动画类型，具体的详细解释请看下面的说明：

动画名称 用来指定之前定义的 @keyframes 中的动画名称；
动画时长 指定动画持续的时间，单位为秒，或者使用 ms 来表示毫秒数，可以使用小数；
动画类型 定义动画的速度曲线，包括 linear（线性）、 ease（缓慢开始，然后变快）、 ease-in（缓慢开始）、 ease-out（缓慢结束）、 ease-in-out（缓慢开始和结束）、 cubic-bezier(n,n,n,n)（自定义贝塞尔曲线）等。

1.2. 基于过渡的动画

CSS3还提供了基于过渡的动画方式。过渡动画的主要思想是将元素的某个属性从初始状态过渡到最终状态，从而呈现出动画效果。比如说，我们可以通过对 border-radius 属性的过渡实现从方形到椭圆形的动画效果。过渡动画的基本语法如下：

元素选择器 {
  transition: transition-property transition-duration transition-timing-function transition-delay;
}

其中， transition 属性的参数包括以下4个部分：

transition-property，过渡效果作用的属性，比如 border-radius、width、height 等；
transition-duration，过渡效果持续的时间，单位为秒；
transition-timing-function，过渡效果的速度曲线，与关键帧动画的 animation-timing-function 属性一样，取值也是 linear、ease、ease-in、ease-out、ease-in-out 或 cubic-bezier(n,n,n,n)；
transition-delay，过渡效果的延时时间，单位为秒。

2.动画效果案例

下面我们来具体演示一下如何实现两个动画效果。

2.1. 实现用过渡动画改变背景色和字体颜色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS3实现动画效果</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: #cccccc;
        text-align: center;
        line-height: 100px;
        color: #000;
        border-radius: 10px;
        transition: background-color 1s, color 1s;
      }
      .box:hover {
        background-color: #ff0000;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="box">Hover Me</div>
  </body>
</html>

上面的代码实现了当鼠标悬浮在 div 元素上时，背景色和字体颜色会从原来的灰色渐变到红色和白色。

2.2. 实现用关键帧动画实现闪烁效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS3实现动画效果</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #cccccc;
        border-radius: 50%;
        animation: blink 1s infinite;
      }

      @keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

上面的代码实现了在指定的持续时间内，div 元素的透明度从 1 变为 0.5，再变为 1，这个过程不断重复，产生了一种明暗闪烁的效果。

这就是两个CSS实现动画效果的小案例，希望读者们能够掌握相关的技巧和知识点。

上一篇：CSS3点击按钮实现背景渐变动画效果 下一篇：css判读浏览器类型的代码