Animation and transition steps

Steps ease. Подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#step-start

by Bacher

HTML

<div class="f1"></div>

CSS

.f1 {
    width: 100px;
    height: 70px;
    background: #000;
    transition: all 1s steps(10);
}
/*
.f1 {
    -webkit-animation: myanimation 1s steps(10) infinite;
}

@-webkit-keyframes myanimation {
    0% {
        background: black;
    }
    100% {
        background: red;
    }
}*/

.f1:hover {
    background: red;
}