占位符动画未运行

Question

我有一个动画设置在 0 和 100 不透明度之间交替。仅将其应用于输入时，它可以正常工作。 但是当我尝试将它应用到 placeholder 选择器的输入时，它没有。

奇怪的是，如果我将不透明度的 css 属性直接放在 placeholder SCSS 类中，它就可以正常工作。

input {
  &:focus::placeholder {
    animation: blinkPlaceholder 2s ease-out -2s infinite alternate forwards;
  }

  @keyframes blinkPlaceholder {
    0% {
      opacity: 100;
    }

    49% {
      opacity: 100;
    }

    50% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }
}

我不知道如何让内置编辑器与 SCSS 一起工作，所以这里有一个 jsFiddle： https://jsfiddle.net/ov1hbd65/2/

Answer 1

我想出了一个解决方案（虽然代码很挑剔）。

您必须使用不同的动画方法。此外，-moz 和 -webkit 样式必须在自己的块中，否则 Firefox 会认为它们无效。

最后，使用了:placeholder-shown 选择器，这样这些样式就不会影响文本。如果没有该选择器，任何应用于占位符的样式也将应用于输入后的文本。

input:placeholder-shown[placeholder]
{
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-weight: normal;
    font-family: initial;
}
input:placeholder-shown::-webkit-input-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-weight: normal;
    font-family: initial;
}
input:placeholder-shown::-moz-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-weight: normal;
    font-family: initial;
}
input:placeholder-shown:focus[placeholder]
{
    opacity: 1;
    color: inherit;
    animation: anim 1s infinite;
}
input:placeholder-shown:focus::-webkit-input-placeholder {
    opacity: 1;
    color: inherit;
    animation: anim 1s infinite;
}
input:placeholder-shown:focus::-moz-placeholder{
    opacity: 1;
    color: inherit;
    animation: anim 4s infinite;
}

@keyframes anim {
    0% { color: rgba(0, 0, 0, 1); }
    49% { color: rgba(0, 0, 0, 1); }
    50% { color: rgba(0, 0, 0, .3); }
    100% { color: rgba(0, 0, 0, .3); }
}

<input placeholder="Test"/>