我在SVG元素的动画中有一个文本和块.在我的例子中,我简化了一切.
我想要一个初始动画,然后在块元素上有一个悬停动画.初始动画很好.(使用铬等于测量值).但是在初始动画之后,用户应该能够悬停块并且块本身应该调整大小(这也已经工作)并且文本应该得到1的不透明度.但是这不起作用,因为不透明度已经设置为关键帧动画.
关于如何解决这个问题的任何建议？我不介意我使用JS或CSS或任何框架.我不依赖CSS动画.刚使用它们因为我认为我会更干净.
重要编辑:我忘记了一个简单但非常重要的事情.在动画之前,还有一些关于不同元素的动画.所以我有一个延迟让我们说2秒.在动画开始之前,不透明度应为0,因此在动画开始之前文本不可见.对不起,忘记了!
.text{
font-weight: bold;
opacity: 0;
transition: all .8s;
animation: showText 3s ease-in-out forwards;
animation-delay: 2s;
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
animation-delay: 2s;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
@keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
} …