Как сделать, чтоб в css3 анимация была плавной?

Question

[ibr_98]

привет, при наведении мыши на блок, он плавенько пошатывается, но когда я отвожу мышь - он резко переходит в исходное состояние, а хотелось бы чтоб было плавно как и при наведении, что можно тут придумать?
вот код:

.floating{
  width: 50px;
  height: 50px;
  background: red;

}

.floating:hover{
  width: 50px;
  height: 50px;
  background: red;
    animation-name: floating;
    -webkit-animation-name: floating;
 
    animation-duration: 0.3s;   
    -webkit-animation-duration: 0.3s;
 
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
 
@keyframes floating {
    0% {
        transform: translateY(0%);  
    }
    50% {
        transform: translateY(7%);  
    }   
    100% {
        transform: translateY(0%);
    }           
}
 
@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);  
    }
    50% {
        -webkit-transform: translateY(7%);  
    }   
    100% {
        -webkit-transform: translateY(0%);
    }           
}

Comments

[Ярослав Иванов]

jsfiddle

[ibr_98]

Ярослав Иванов: вот

Answer 1

[Vlad Feninets]

можно использовать will-change, но вообще самый главный принцип - не анимировать всё сразу, а последовательно, тогда ваша анимация будет 60fps. Для этого можно использовать циклы в SASS, например. Вот хорошая статья - https://habrahabr.ru/company/paysto/blog/264421/

Comments

[ibr_98]

не подскажешь как в моем случае использовать will-change?

[Aleksandr]

Спасибо за ссылку, интересно

[Vlad Feninets]

ibr_98: попробуй на ховере сделать will-change: transform, по-идее даст немного прироста, + можно еще заюзать transform: translateZ(0), это позволит вынести рассчет анимации на GPU. В общем это целая наука и тут много различных приемов, но как правило для каждого конкретного случая нужно сидеть и экспериментировать.