Проблема заключается в следующем.
Допустим навожу на какой то элемент со свойством :hover
и запускается анимация, но как вы все знаете если убрать указатель мыши с объекта, он возвращается в своё исходное состояние. А мне нужно чтобы на объекте прошла анимация до конца.
Перелопалит кучу форумов, не нашел решение. Единственное до чего допер сам так это если анимацию применить к самому объекту, а потом при наведении на объект перезапустить её свойством animation-play-state: running; но всё это работает лишь в сафари... в остальных браузерах анимация запускается один раз и больше не работает при наведении на объект.
@keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
//анимация срабатывает один раз , но так как конкретно этот элемент находится ниже, этого не видит пользователь пока не прокрутить страницу
li {
width: 500px;
height: 50px;
margin-bottom: 10px;
position: absolute;
-webkit-animation: swing 1s ease-in-out;
animation: swing 1s ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
//затем каждый раз когда навожу на элемент, запускается анимация и доходит до конца, но работает только в Safari Mac
li:hover {
-webkit-animation-play-state: running;
animation-play-state: running;
}
Понятно, что это всё можно сделать средствами JavaScript, но... как сделать это лишь на чистом CSS3 если конечно возможно... хотя в сафари на данный момент у меня получилось