CSS анимация, пользовательский цикл SVG и его пути независимо от наведения - PullRequest
Новая
       42

CSS анимация, пользовательский цикл SVG и его пути независимо от наведения

0 голосов
/ 02 ноября 2018

Я некоторое время пытался найти решение. У меня есть логотип SVG, состоящий из 3 групп деталей (желтый, белый, серый), и я хочу, чтобы все эти детали отодвинулись при наведении курсора на весь логотип. Как только части исчезнут, я хочу, чтобы они плавали в виде петли, как здесь, до тех пор, пока они зависают над логотипом: кодовый плавающий аватар

Я хочу, чтобы начальное движение прямо при наведении курсора на логотип и детали отодвинулись друг от друга, также анимированные. Я могу заставить части плавать в цикле, но я не могу заставить анимировать начальное движение, оно просто появляется далеко и начинает анимацию цикла оттуда. Есть ли способ сделать эти две анимации без JS? Еще одно усложнение заключается в том, что весь .logo также анимирован и всплывает точно так же, как аватар в примере с кодом. Это также, кажется, отключает мой .path-1: hover, поэтому части не удаляются. Спасибо! 

@keyframes float {
0% {
    transform: translateY(0);
}
25% {
    transform: translateY(-5%);
} 
50% {
transform: translateY(0);
}
75% {
transform: translateY(5%);
}
100% {
transform: translateY(0);
}
}
.logo .yellow, .white, .grey {
animation: float 5s linear infinite;
transition: all 0.25s ease;
}
.path-1:hover {
transform: translateX(200px) translateY(-200px);
animation: float 5s linear infinite;
}
...