Я борюсь с двумя анимациями.Я хотел бы, чтобы при наведении курсора на одну анимацию запускалась анимация, а после ее завершения запускалась другая анимация (без необходимости наведения второй анимации).Как я могу сделать это?Я полностью потерян.Нужно ли использовать Javascript?(Я все еще новичок)
Так что я хотел бы эту ссылку .link - сначала запускается manko, а затем # blendlogo.
моя часть css
#blendlogo{
-webkit-animation-name: wiggle;
-ms-animation-name: wiggle;
-ms-animation-duration: 750ms;
-webkit-animation-duration: 750ms;
-webkit-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
}
.link link--manko:hover {
-webkit-animation-name: wiggle;
-ms-animation-name: wiggle;
-ms-animation-duration: 750ms;
-webkit-animation-duration: 750ms;
-webkit-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
}
#webkit-keyframes wiggle {
0% {-webkit-transform: rotate(10deg);}
25% {-webkit-transform: rotate(-10deg);}
50% {-webkit-transform: rotate(20deg);}
75% {-webkit-transform: rotate(-5deg);}
100% {-webkit-transform: rotate(0deg);}
}
@-ms-keyframes wiggle {
0% {-ms-transform: rotate(1deg);}
25% {-ms-transform: rotate(-1deg);}
50% {-ms-transform: rotate(1.5deg);}
75% {-ms-transform: rotate(-5deg);}
100% {-ms-transform: rotate(0deg);}
}
@keyframes wiggle {
0% {transform: rotate(10deg);}
25% {transform: rotate(-10deg);}
50% {transform: rotate(20deg);}
75% {transform: rotate(-5deg);}
100% {transform: rotate(0deg);}
}