Animation for Placeholder Not Running

Question

I have an animation setup to alternate between 0 and 100 opacity. When applying it to just the input it works fine. But when I try to apply it to the placeholder selector for the input it does not.

The curious thing is if I put the css attribute for opacity directly in the placeholder SCSS class it works fine.

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;
    }
  }
}

I couldn't figure out how to get the built in editor to work with SCSS, so here is a jsFiddle: https://jsfiddle.net/ov1hbd65/2/

user_2096053 · Answer

I figured out a solution (albeit the code is very picky).

You have to use a different method of animation. Further more the -moz and -webkit styles have to be in their own blocks or they will be deemed invalid by Firefox.

Finally, the :placeholder-shown selector is used so that these styles don’t affect the text. Without that selector any style applied to the placeholder will also apply to the text once typed in.

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); }
}

Animation for Placeholder Not Running

1 Answers