js增加动画_在网络上的动画中增加吸引力

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-08-13 21:03:09 发布 288 阅读 AI 写同款· GEO 优化 ›

js增加动画

当我们谈论使用动画时，我们经常讨论创建过渡，动画等的实用方法。动画是使我们的设计脱颖而出的有力方法，但与其将注意力集中在单个动画的工作方式上，不如将多个动画组合在一起可以创建更强大的功能。

上诉

迪士尼的12条动画基本原则将“申诉”定义为与“演员的魅力”相对应。通过这种方式，动画的真实感，样式和实质相加在一起，可以创建一种让观众感到真实和有趣的角色感。

这是Stripe用来产生巨大效果的技术。 Stripe是付款处理器，并提供用于在网站中嵌入付款表格的工具。这些形式以精美的设计而著称，尤其是动画的使用。

在本文中，我将讨论如何使用多个动画来创建一种效果，而不是其各个部分的总和，并说明如何以实际方式使用这些知识。

社交媒体卡

在此示例中，我们将使用动画为卡片显示详细信息以及指向网络和其他社交帐户的链接。

当按下按钮时，它将提示卡片显示，其中包含一些跟随选项。而不是使用普通的旧模态窗口，我们将使用动画使其更有趣。

为了吸引人，有几个动画正在进行。各种片段进行动画处理，并按顺序引入每个元素。这有助于观看者了解他们所按下的内容与动画顺序之间的联系，从而有助于吸引人们关注以下图标。

设置HTML

首先，我们需要按下一个按钮并显示一张卡片。首次显示内容时，该卡将被隐藏。

<button class="show-card">
    <img src="https://avatars2.githubusercontent.com/u/853536?v=3&amp;s=48">
    Press here
  </button>
  <article class="card">
    <section class="close">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 32 32">
        <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z" fill="#aaa"></path>
      </svg>
    </section>
    <section class="details">
      <h2 class="name">Donovan Hutchinson</h2>
      <p class="description">Donovan is a Dublin-based front-end developer with a passion for CSS, animation and making the web fun.</p>
    </section>
    <section class="headshot">
      <img src="https://avatars2.githubusercontent.com/u/853536?v=3&amp;s=280">
    </section>
    <section class="icon-bar">
      <ul>
        <li>
          <a href="http://cssanimation.rocks">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
              <path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z" fill="#fff"></path>
            </svg>
          </a>
        </li>
        <li>
          <a href="https://twitter.com/cssanimation">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
              <path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z" fill="#fff"></path>
            </svg>
          </a>
        </li>
        <li>
          <a href="https://github.com/cssanimation">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
              <path d="M0 17.388c0 1.45 0.136 2.762 0.407 3.935s0.647 2.193 1.127 3.059 1.090 1.627 1.831 2.285c0.741 0.657 1.544 1.195 2.41 1.612s1.854 0.756 2.965 1.017c1.111 0.261 2.245 0.443 3.403 0.548s2.431 0.156 3.818 0.156c1.398 0 2.676-0.052 3.834-0.156s2.295-0.287 3.411-0.548 2.11-0.6 2.981-1.017c0.871-0.417 1.68-0.954 2.425-1.612s1.361-1.419 1.846-2.285 0.863-1.886 1.134-3.059c0.271-1.174 0.407-2.486 0.407-3.935 0-2.587-0.866-4.825-2.597-6.713 0.094-0.25 0.18-0.535 0.258-0.853s0.151-0.772 0.219-1.361c0.068-0.589 0.042-1.27-0.078-2.042s-0.342-1.56-0.665-2.363l-0.235-0.047c-0.167-0.031-0.441-0.023-0.822 0.024s-0.824 0.141-1.33 0.282c-0.506 0.141-1.158 0.412-1.956 0.814s-1.64 0.905-2.527 1.51c-1.523-0.417-3.615-0.626-6.275-0.626-2.65 0-4.736 0.209-6.259 0.626-0.887-0.605-1.734-1.108-2.543-1.51s-1.453-0.673-1.933-0.814c-0.48-0.141-0.928-0.232-1.346-0.274s-0.681-0.055-0.79-0.039-0.196 0.034-0.258 0.055c-0.323 0.803-0.545 1.591-0.665 2.363s-0.146 1.453-0.078 2.042 0.141 1.043 0.219 1.361c0.078 0.318 0.164 0.602 0.258 0.853-1.732 1.888-2.598 4.126-2.598 6.713zM3.928 21.315c0-1.502 0.683-2.879 2.050-4.131 0.407-0.376 0.881-0.66 1.424-0.853s1.155-0.302 1.839-0.329c0.683-0.026 1.338-0.021 1.964 0.016s1.398 0.086 2.316 0.149c0.918 0.063 1.711 0.094 2.379 0.094s1.46-0.031 2.378-0.094c0.918-0.063 1.69-0.112 2.316-0.149s1.28-0.042 1.964-0.016c0.683 0.026 1.296 0.136 1.839 0.329s1.017 0.477 1.424 0.853c1.367 1.231 2.050 2.608 2.050 4.131 0 0.897-0.112 1.693-0.337 2.386s-0.511 1.275-0.861 1.745-0.834 0.868-1.455 1.197c-0.621 0.329-1.226 0.582-1.815 0.759s-1.346 0.316-2.269 0.415c-0.923 0.099-1.747 0.159-2.472 0.18s-1.646 0.031-2.762 0.031-2.037-0.010-2.762-0.031c-0.725-0.021-1.549-0.081-2.472-0.18s-1.68-0.237-2.269-0.415c-0.589-0.177-1.194-0.43-1.815-0.759s-1.106-0.728-1.455-1.197c-0.349-0.469-0.636-1.051-0.861-1.745s-0.336-1.489-0.336-2.386zM20 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3zM8 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3z" fill="#fff"></path>
            </svg>
          </a>
        </li>
    </section>
  </article>

该按钮是图像和一些文本。按下时，将显示卡片。该卡包括四个部分：关闭按钮，详细信息部分，头像和包含社交图标的图标栏。在此示例中，我们使用从Entypo集合中获取的嵌入式SVG图标。

造型

在进入动画之前，让我们为按钮和卡片添加一些样式。一，按钮：

.show-card {
  background: #fff;
  border-radius: 4em;
  border: 0.25em solid #1fa756;
  color: #1fa756;
  font-size: 18px;
  left: 50%;
  line-height: 1.5;
  padding: 1em 1em 1em 4em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  outline: none;
}

.show-card img {
  border-radius: 50%;
  left: 0.3em;
  position: absolute;
  top: 0.25em;
  width: 3em;
}

注意：我们添加了一个outline: none; 之所以将其添加到.show-card元素，是因为某些浏览器向按钮的焦点状态添加了特殊的光晕（我们不希望这样）：

然后，我们将为卡片及其中的每个部分设置样式。

.card {
  bottom: calc(50% - 8em);
  display: none;
  height: 16em;
  left: calc(50% - 10em);
  position: absolute;
  transition: all 0.4s 0.4s cubic-bezier(.5,.2,.43,1.33);
  width: 20em;
}

.close {
  color: #aaa;
  cursor: pointer;
  height: 1em;
  opacity: 0;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 1em;
  z-index: 10;
}

.details {
  position: absolute;
  bottom: 2.5em;
  background: #fff;
  border-radius: 0.25em;
  height: 0;
  overflow: hidden;
  text-align: center;
  width: 20em;
}

.name {
  color: #333;
  font-weight: bold;
  margin: 3em 0 0;
  opacity: 0;
}

.description {
  color: #666;
  font-size: 1em;
  font-weight: 200;
  line-height: 1.5;
  margin: 0.75em 2em 2em;
  opacity: 0;
}

.headshot img {
  border-radius: 50%;
  border: 0.5em solid #fff;
  display: block;
  height: 6em;
  margin: -3em auto 0.5em;
  opacity: 0;
  width: 6em;
}

.icon-bar {
  background: #1fa756;
  border-radius: 0.25em;
  left: -1em;
  position: absolute;
  right: -1em;
  top: 13em;
}

.icon-bar ul {
  display: flex;
  flex-display: column;
  flex-wrap: nowrap;
  padding: 0;
}

.icon-bar li {
  display: inline-block;
  font-size: 2em;
  opacity: 0;
  padding: 0 1em;
  width: 33%;
}

.icon-bar a {
  color: #fff;
  text-decoration: none;
}

请注意，我们将此卡设置为display: none最初display: none 。然后，我们将使用JavaScript进行控制。

基本的显示和隐藏

我们将不设置CSS而是直接设置显示和隐藏联系信息的基本操作。这将利用一些JavaScript（在本例中为jQuery）来根据单击的内容添加和删除类：

// Show the card on clicking the button
$('.show-card').click(function(e) {
  $('.card').addClass('show').css('display', 'block');
  $('.show-card').addClass('hide');
});

// Hide the card on clicking the "x"
$('.card .close').click(function(e) {
  $('.card').css('display', 'none');
});

现在，我们应该能够使用jQuery和display CSS属性显示和隐藏卡。

请在此处查看基本的显示和隐藏示例：

动画之前

放置好布局后，我们需要添加一些额外的样式来隐藏各种元素，以便可以将它们设置为动画。

.close, .name, .description, .headshot img, .icon-bar li {
  opacity: 0;
}
.details {
  height: 0;
}

这些元素在其动画生效之前会有所延迟，因此一开始需要将其隐藏。

基本动画

有了显示和隐藏卡片的机制，我们就可以开始附加动画了。上面JavaScript在show的卡片上添加了show状态，我们可以将动画附加到此类中，从而介绍卡片的各个部分。

为此，我们将使用CSS animation属性和keyframes集。

在CSS中创建通用动画并重新使用它们很有帮助。诸如淡入和淡出之类的简单动画可以一次定义，并可以在多个地方使用。

为了显示如何定义keyframes ，让我们创建淡入和淡出动画。

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

关键帧是一系列步骤，定义为百分比。它们可以是任意数量的步骤，但在我们的示例中，我们仅定义开始（0％）和结束（100％）关键帧。在fade-in我们从不透明度（0）开始，到完全不透明度（1）结束。 fade-out动画的效果与此相反。

当按钮显示或隐藏时，我们可以使用animation属性将这些淡入淡出的动画应用于按钮。

.show-card {
  animation: fade-in 0.4s 1s forwards ease-out;
}
.show-card.hide {
  animation: fade-out 0.4s forwards ease-out;
}

这里的动画速记告诉卡使用fade-in动画，持续0.4秒，延迟1秒。动画将播放一次，并在结尾处停止（向前），并使用ease-out定时功能。

将hide类应用于按钮时， fade-out动画将生效。

弹性效应时序函数

我们将介绍的第一部分是图标栏。由于这是链接的位置，因此我们希望它脱颖而出，成为人们注意到的第一件事。

制作动画时，我们可以使用计时功能属性创建有趣的效果。在这种情况下，我们将使用cubic-bezier计时功能在图标栏出现时添加一些“反弹”。

首先，我们将创建一些简单的关键帧，以使条形图从小处开始并增加高度。

@keyframes show-icon-bar {
  0% {
    height: 0;
  }
  100% {
    height: 4.5em;
  }
}

现在，当将show类添加到卡中时，我们可以将这组关键帧应用于图标栏。

.card.show .icon-bar {
  animation: show-icon-bar .5s forwards cubic-bezier(.64,1.87,.64,.64);
}

弹性效果是通过使用cubic-bezier计时函数创建的。定时功能描述了动画中速度的变化，并且可以设计为过冲动画的开始或结束。该动画稍微结束，然后进行校正，从而创建反弹。

动画延迟

引入图标栏后，我们需要对包含详细信息和头像的部分进行动画处理。我们希望此部分在引入图标栏之后出现。为此，我们将使用animation-delay属性。

.card.show .details {
  animation: show-detail-container 0.7s 0.5s forwards cubic-bezier(.54,-0.38,.34,1.42);
}

应用于details部分的动画被设置为具有0.7秒的持续时间和0.5秒的延迟。这意味着动画只有在引入图标栏之后才能开始。

我们在这里还使用三次贝塞尔曲线计时功能使其弹跳。

接下来，我们定义此容器动画的关键帧。

@keyframes show-detail-container {
  0% {
    height: 0;
  }
  100% {
    height: 13.5em;
  }
}

show-detail-container动画关键帧始于不可见的容器（高度为零），并动画化为整个高度。然后，三次方贝塞尔曲线定时功能会使动画略微超调以使其有些反弹。

组合多个动画

可以在单个属性中应用多个动画。只要动画不相互冲突（通过尝试使同一属性动画化），就可以使用它们为动画添加细微差别。多个动画的定义与单个动画一样，但以逗号分隔。

在这种情况下，我们将淡化爆头，名称和描述内容，同时使用pop-in功能使它们看起来像是在远处缩放。

如果我们使用了一个具有三次方贝塞尔曲线定时功能的单个动画，则淡入淡出效果似乎会反弹并且看起来很奇怪。取而代之的是，我们将使用线性定时功能进行渐变，而缩放将具有反弹效果。

首先，我们定义pop-in关键帧。

@keyframes pop-in {
  0% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}

这使用scale变换使每个元素开始变小并按其正常大小缩放。

让我们引入内容。每个元素都有两个动画，每个元素都有稍长的动画延迟以错开其外观。

.card.show .headshot img {
  animation: fade-in 0.4s 1.2s forwards, pop-in 0.6s 1.2s forwards cubic-bezier(.64,1.87,.64,.64);
}
.card.show .name {
  animation: fade-in 0.3s 1.3s forwards, pop-in 0.3s 1.3s forwards cubic-bezier(.64,1.87,.64,.64);
}
.card.show .description {
  animation: fade-in 0.3s 1.4s forwards, pop-in 0.3s 1.4s forwards cubic-bezier(.64,1.87,.64,.64);
}

关闭图示

关闭图标动画利用了我们之前定义的fade-in关键帧。

.card.show .close {
  animation: fade-in 0.3s 1.3s forwards;
}

呼吁采取行动

我们现在只需要显示图标。呈现动画时，动画的最后一件事就是观众的注意力最终集中在这里。这意味着观看者的眼睛将跟随动画并完成查看我们希望他们选择的图标。

我们将再次使用animation delay属性来确保最后引入它们。首先，我们为图标定义动画的关键帧：

@keyframes show-icon {
  0% {
    opacity: 0;
    transform: rotateZ(-40deg);
  }
  100% {
    opacity: 1;
    transform: rotateZ(0);
  }
}

每个图标在淡入时都会旋转一点。我们现在可以将此动画附加到每个图标上，使用每个图标上的延迟使其交错。

.card.show .icon-bar li {
  animation: show-icon 0.5s forwards cubic-bezier(.64,1.87,.64,.64);
}

.card.show .icon-bar li:nth-child(1) {
  animation-delay: 1.8s;
}
.card.show .icon-bar li:nth-child(2) {
  animation-delay: 1.9s;
}
.card.show .icon-bar li:nth-child(3) {
  animation-delay: 2s;
}

将所有这些放在一起，我们现在有了一个卡，当选择按钮时，该卡可以很好地显示。

还有一件事

在完成之前，我们需要向“关闭”按钮添加一个hide动作，并对卡片进行动画处理。首先，我们将更新JavaScript。按下close图标后，JavaScript会等待一秒钟，然后移除display: none的卡display: none 。

$('.show-card').click(function(e) {
  $('.card').addClass('show').css('display', 'block');
  $('.show-card').addClass('hide');
});

$('.card .close').click(function(e) {
  $('.card').addClass('hide');
  setTimeout(function() {
    $('.card').css('display', 'none').removeClass('show').removeClass('hide');
  }, 1000);
  $('.show-card').removeClass('hide');
});

这给了我们一秒钟的动画时间，让我们从屏幕的底部掉下来。实现此目的的关键帧如下：

@keyframes drop-card {
  100% {
    bottom: -100%;
    transform: rotateZ(20deg);
    opacity: 0;
  }
}

然后，我们将其作为动画应用到卡片上。

.card.hide {
  animation: drop-card 1s forwards cubic-bezier(.54,-0.38,.34,1.42);
}

演示版

放在一起，您可以在这里看到结果。

关于前缀和浏览器兼容性的说明

跨浏览器很好地支持动画。根据您的听众，它们应该在大多数情况下都可以工作。确保基本的显示和隐藏功能正常工作，并添加任何动画作为渐进增强功能是值得的。

摘要

通过使用多个动画，尤其是animation-delay属性，我们采用了本来可以是非常简单的小部件并使之更具吸引力。动画会引导观众浏览每个元素，并将其引导至号召性用语。

动画可能是在设计中进行交流的好方法。这种交流可以帮助访问者了解您的意图，并提高您对工作质量的信誉和信心。

翻译自: https://webdesign.tutsplus.com/tutorials/adding-appeal-to-your-animations-on-the-web--cms-23649