JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ok">
  This is the block which is intended to animate, both the background color and an outline
</div>
<div class="fail">
  This is intended to animate, both the background color and an outline, but fails (default outline undefined (which is none))
</div>
<div class="also-fail">
  This is intended to animate, both the background color and an outline, but fails (default outline explicitly defined as none)
</div>
<div class="incredible">
  This div demonstrates that the navigator is prepared to do animations from and to outline none, so I can't understand anything :(
</div>

CSS

@keyframes hilite {
    0% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
    20% {
        background-color: #F6F6BC;
        outline: #F6F6BC solid 10px;
    }
    100% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
}
@-moz-keyframes hilite {
    0% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
    20% {
        background-color: #F6F6BC;
        outline: #F6F6BC solid 10px;
    }
    100% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
}
@-webkit-keyframes hilite {
    0% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
    20% {
        background-color: #F6F6BC;
        outline: #F6F6BC solid 10px;
    }
    100% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
}
@-o-keyframes hilite {
    0% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
    20% {
        background-color: #F6F6BC;
        outline: #F6F6BC solid 10px;
    }
    100% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
}

@keyframes uglyHilite {
    0% {
        background-color: transparent;
        outline: none;
    }
    20% {
        background-color: #F6F6BC;
        outline: #F6F6BC solid 10px;
    }
    100% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
}
@-moz-keyframes uglyHilite {
    0% {
        background-color: transparent;
        outline: none;
    }
    20% {
        background-color: #F6F6BC;
        outline: #F6F6BC solid 10px;
    }
    100% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
}
@-webkit-keyframes uglyHilite {
    0% {
        background-color: transparent;
        outline: none;
    }
    20% {
        background-color: #F6F6BC;
        outline: #F6F6BC solid 10px;
    }
    100% {
       ...