时间戳

首页 > 解决方案 > 我正在尝试通过 CSS 从底部设置动画，但无法正常工作

css - 我正在尝试通过 CSS 从底部设置动画，但无法正常工作

问题描述

我试图通过css从底部出现一个跨度我编写了以下不起作用的代码，

span {
      display: inline !important;
      background-color: transparent !important;
      overflow: hidden;
      animation: from-btm 1s !important;
      @keyframes from-btm {
               from {
                    margin-bottom: -5%;
               }
               to {
                    margin-bottom: 0%;
               }
      }
}

标签： csscss-animations

解决方案

您的@keyframes属性应该在 span 元素之外。它应该留在 span 元素之外，因为它是它自己的元素。像这样：

span {
      display: inline !important;
      background-color: transparent !important;
      overflow: hidden;
      animation: from-btn 1s ease 0s 1;
}

@keyframes from-btm {
      from {
         margin-bottom: -5%;
        }
      to {
         margin-bottom: 0%;
        }
      }

此外，您的动画速记不是“正确编写的”，它应该animation: "animation-name" "animation-duration" "animation-display(ease, ease-in, ease-out, linear)" "animation-delay" animation-count(any number or even infinite);如上所示。

同样出于性能原因，您应该考虑使用这样的transform元素为位置设置动画：例如。

@keyframes from-btm {
      from {
         transform: translateY(200%);
        }
      to {
         transform: translateY(10%);
        }
      }

此外，在使用变换时，请确保为您的元素添加一个位置属性span，例如position: absolute或position: relative

推荐阅读