CSS @keyframe упрощает анимацию

Я пытаюсь облегчить анимацию до исходных значений элемента после отключения. Сама анимация работает нормально, но когда я навожу курсор на элемент, он мгновенно возвращается в исходное состояние, в то время как я хотел бы иметь замедление на 0,2 секунды. Любая помощь?

Вот мой код:

img.footer {
        filter: grayscale(1);
        -webkit-filter: grayscale(1);
        animation-timing-function: ease-out; /*this is what i have tried*/
        -webkit-animation-timing-function: ease-out; /*this is what i have tried*/
    }
    @keyframes flash {
        0%   {
            filter: grayscale(1);
            -webkit-filter: grayscale(1);
        }
        6%   {
            filter: grayscale(0) brightness(1.2);
            -webkit-filter: grayscale(0) brightness(1.2);
        }
        33%, 100%   {
            filter: grayscale(0) brightness(1);
            -webkit-filter: grayscale(0) brightness(1);
        }
    }
    img.footer:hover {
        animation-name: flash;
        animation-duration: 0.999s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out; /*this is what i have tried*/
        -webkit-animation-timing-function: ease-out; /*this is what i have tried*/
    }

Рабочий пример


animation css hover keyframe
person Remus Sarnus    schedule 13.12.2017    source источник
comment
codepen.io/anon/pen/OzVPJb   -  person Remus Sarnus    schedule 14.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

Один из подходов состоит в том, чтобы применить его только с эффектами перехода для начального и конечного состояний, где css без наведения является желаемым начальным состоянием и переходом от наведения:

img.footer {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  -moz-transition:all 0.2s ease;
    -webkit-transition:all 0.2s ease;
    -ms-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease;
}
img.footer:hover {
  filter: grayscale(0) brightness(1.2);
  -webkit-filter: grayscale(0) brightness(1.2);
  -moz-transition:all 0.999s ease;
    -webkit-transition:all 0.999s ease;
    -ms-transition:all 0.999s ease;
    -o-transition:all 0.999s ease;
    transition:all 0.999s ease;
}

Единственное предостережение в отношении этого подхода заключается в том, что вы не можете указать промежуточные значения оттенков серого или яркости (если вам не нужен линейный переход).

person Anson W Han    schedule 13.12.2017
comment
В том-то и дело, что я пытаюсь заставить работать ключевой кадр значения яркости 6%. Элемент восстанавливает цвет и мигает при наведении (6%), затем яркость возвращается к 1, а оттенки серого остаются на 0 от 33 до 100% ключевого кадра. Если я уберу ключевой кадр вспышки (яркость 1,2) на 6%, это станет простым переходом при наведении, который довольно прямолинеен. - person Remus Sarnus; 14.12.2017
comment
вам может понадобиться использовать javascript, чтобы установить переход анимации - person Anson W Han; 14.12.2017
comment
Так неужели нет решения на чистом CSS? - person Remus Sarnus; 14.12.2017
comment
Не то, чтобы я знал или видел. - person Anson W Han; 14.12.2017