我正在努力制作两个动画。我想发生的是,通过悬停一个动画,该动画开始,并且一旦完成,另一个动画就开始(而不必悬停第二个动画)。我该怎么做?我完全迷路了。我需要使用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);}
}