SASS 如何实现 CSS 动画？-JavaScript中文网-JavaScript教程资源分享门户

CSS 动画在 Web 开发领域中变得越来越流行，使得页面更加生动、娱乐并吸引人。然而，编写 CSS 动画代码需要花费许多时间且往往变得复杂。SASS 是针对 CSS 的一种预处理器，使 CSS 的编写变得更加易于管理并且更加强大。在本文中，我们将探讨如何使用 SASS 来实现 CSS 动画。

SASS 简介

SASS 或 SCSS 是一种 CSS 预处理器，可以将 CSS 编写和组织得更加简单。SASS 具有许多功能，例如变量、嵌套、函数、混合等等。这些功能可以显着简化 CSS 的编写并且使其更加易于维护。

尽管 SASS 支持所有 CSS 功能，但本文中我们将侧重于 SASS 的动画功能。

SASS 动画简介

SASS 具有创建 CSS 动画的功能。SASS 的动画可以定义、重复和控制程序化动画，而不必手动编写大量的 CSS 代码。

SASS 使用 @keyframes 关键字来定义动画，并使用 animation 属性来将动画应用于某个元素。

下面是一个简单的 SASS 动画定义：

// javascriptcn.com 代码示例
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.box {
  animation: bounce 1s ease infinite;
}

在这里，我们定义了一个名为 bounce 的动画，该动画包含三个键帧：0％，50％和100％。每个键帧都定义了元素的状态，例如 transform。在这种情况下，我们定义了一个简单的垂直平移动画。

接下来，我们将 bounce 动画应用于一个名为 .box 类的 CSS 选择器。为此，我们使用一个 animation 属性，并指定它的持续时间，动画曲线以及重复次数。

SASS 动画高级技巧

除了基本动画之外，SASS 还具有许多高级动画技术，使得动画支持版面，更具体的效果。

Sass-mq

Sass-mq 是一个响应式设计添加到 SASS 的库，它简化了基于媒体查询的布局和管理 CSS。它允许您根据屏幕和设备大小和类型创建有条件的 SASS 代码块和 CSS 类。

您可以使用 Sass-mq 创建基于媒体查询的动画。例如，您可以针对小于480像素的设备创建不同的 @keyframes 定义以及 animation 属性。下面是一个示例：

// javascriptcn.com 代码示例
// 定义 12 种颜色
$colors: (
  red:     #ff4136,
  orange:  #ff851b,
  yellow:  #ffdc00,
  green:   #2ecc40,
  blue:    #0074d9,
  navy:    #001f3f,
  purple:  #b10dc9,
  fuchsia: #f012be,
  black:   #111111,
  gray:    #aaaaaa,
  silver:  #dddddd,
  white:   #ffffff
);

// 对于每个 $color，定义两个动画来反向旋转和平移
@each $name, $color in $colors {
  .animate-#{$name} {
    background-color: $color;
    animation: spin 2s linear infinite, move 2s ease-out infinite alternate;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes move {
    to {
      transform: translateY(100px);
    }
  }
  
  // 仅在 480 像素以下的设备上使用
  @include mq($mobile) {
    .animate-#{$name} {
      animation: move 1s ease infinite alternate;
    }
    
    @keyframes move {
      to {
        transform: translateY(50px);
      }
    }
  }
}

在这里，我们使用 $colors map 定义了一组颜色，并遍历该 map。对于每个颜色，我们定义了两个不同的动画：spin 和 move。我们也创建了一个类名，该类名基于每种颜色。类名提供了对应的 background-color 值以及将符号应用于该元素的动画。

SASS 包含

SASS 提供了 @include 关键字，允许您将另一个 SASS 文件中的代码包含在当前文件中。这是一个极好的动画功能。您可以将 @include 用于 @keyframes 定义以及 animation 属性的定义，并使用它来重复相同的代码。

// javascriptcn.com 代码示例
@import 'animations';

.button {
  @include fade-in;
  color: white;
  background-color: blue;
}

.form {
  @include shake;
  input {
    color: gray;
  }
}

在这里，我们使用了两个不同的动画，fade-in 和 shake。这些动画定义在名为 animations 的 SASS 文件中，我们在此文件中使用了 @mixin 引入了它们。然后，我们在选择器中使用 @include 引用每个动画，从而将它们应用于对应的元素。

总结

使用 SASS，您可以编写更简单、具体和可读的 CSS 动画。SASS 的功能使得 CSS 动画变得更加管理和自我描述。我们已经看到了如何使用 @keyframes，animation，@include 和动画库 Sass-mq 来创建 SASS 动画。这是一个非常强大的工具，可以大大减少动画代码的工作量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6539c00a7d4982a6eb33b537