Question

我有一个元素

<form class="fade-in-form">...</form>

带动画的

.fade-in-login-form{
    opacity: 0;
    -webkit-animation: fadein 2s; !important;
    -webkit-animation-delay: 3s; !important;
}
@-webkit-keyframes fadein {
from {
        opacity:0;
    }
    to {
        opacity:1; !important;
    }
}

我希望元素最初不可见，但随后渐渐消失。
问题是form首先是不可见的（opacity: 0;），然后淡入，但在动画闪烁后再次隐形！为什么动画不会用opacity: 0;覆盖opacity: 1;的初始值？我怎样才能达到我的目的？
如果解决方案需要Javascript：我更喜欢AngularJS而不是jQuery。

Answer 1

默认情况下，动画仅在运行时才适用。当它结束运行时，它不再适用

如果要更改此行为，则需要使用animation-fill-mode属性

在您的情况下，值为前锋

animation-fill-mode: forwards;

（如果需要，带前缀）

Answer 2

首先，在语法方面，我认为你的值和你的值之间不应该有一个分号！重要的是（顺便说一句，不是一个好用的）：

-webkit-animation: fadein 2s !important;

其次，我猜这些样式没有应用，因为你的元素没有被加载;如果您在窗体上将display设置为block并在页面内容加载javascript后将其设置回阻止（请参阅下面的代码），它是否更好用？

document.addEventListener("DOMContentLoaded", function(event)
{
     document.getElementById("form").style.display = "block";
});

codepen example

Answer 3

请在第一个选择器中取消opacity: 0;：

.fade-in-form {
  -webkit-animation: fadein 2s 3s; /* Chrome, Opera 15+, Safari 5+ */
          animation: fadein 2s 3s; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes fadein {
  0%   { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@keyframes fadein {
  0%   { opacity: 0.0; }
  100% { opacity: 1.0; }
}

正如@sodawillow所提到的，尝试永远不要使用!important，但如果你真的必须这样使用它：property-name: property-value !important;

使用动画更改初始样式值

3 个答案: