占位符动画 Not 运行

Question

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

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

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"/>

占位符动画 Not 运行

Animation for Placeholder Not Running

css

sass

css-animations