animation CSS – focus input et e-mail invalide

SCSS

$cd-txt2: #6300a0;
$cd-box: white;
$cd-txt--invalid: #fff;
$cd-danger: #b20a37;
.form {
    &__group {
        & input {
            border: 2px solid $cd-box;
            border-radius: 100rem;
            color: $cd-txt2;
            font-size: 1.5rem;
            outline: none;
            padding: .5rem 1.5rem;
            width: 100%;
            transition: background-color 400ms;
            &:focus {
                border: 2px solid $cd-txt2;
            }
            &:not(:focus):invalid {
                background-color: $cd-danger;
                border: 2px solid $cd-danger;
                color: $cd-txt--invalid;
            }
        }
    }
}

Les pseudoclasses les plus adaptées pour déclencher des transitions sont celles qui impliquent une interaction avec l’utilisateur.
Les pseudoclasses les plus courantes pour déclencher une transition sont :hover, :active, :focus, :valid, :invalid, :not(), :checked, :enabled, et :disabled