Html CSS在不同事件期间对同一元素的多次转换

我有一组链接标签，它们显示在带有translate3D的页面加载上。这个很好用。但是我需要链接标签在它的悬停上缩放。这不直接起作用

---

有没有一种方法可以通过CSS来实现呢？ 代码如下：

.linkblock{
利润率：20%0；
}
.hlink{
宽度：12%；
高度：60px；
不透明度：0；
填充：0 10px；
背景：rgba（0,0,0,0.3）；
显示：内联块；
文本对齐：居中；
颜色：rgba（0,0,0,0.6）；
过渡：所有0.5s缓解；
}
.hlink:悬停{
转换：转换（0px，-20px）；
颜色：红色；
背景：rgba（0,0,0,0.6）
}
@关键帧淡入淡出{
从{
不透明度：0；
转换：translate3d（0,100%，0）；
}
到{
不透明度：1；
变换：translate3d（0,0,0）；
}
}
法代努普先生{
动画：fadeInUp 0.3s，两者都轻松；
}
.linkblock a:第n个子项（1）{
动画延迟：1.0s；
}
.linkblock a:第n个子项（2）{
动画延迟：1.1s；
}
.linkblock a:第n个子项（3）{
动画延迟：1.2s；
}
.linkblock a:第n个子项（4）{
动画延迟：1.3s；
}
.linkblock a:第n个子项（5）{
动画延迟：1.4s；
}
.linkblock a:第n个子项（6）{
动画延迟：1.5s；
}
.linkblock a:第n个子项（7）{
动画延迟：1.6s；
}
.linkblock a:第n个子项（8）{
动画延迟：1.7秒；
}

请尝试以下操作：

.linkblock{
利润率：20%0；
}
.hlink{
宽度：12%；
高度：60px；
不透明度：0；
填充：0 10px；
背景：rgba（0,0,0,0.3）；
显示：内联块；
文本对齐：居中；
颜色：rgba（0,0,0,0.6）；
过渡：所有0.5s缓解；
变换：translate3d（0,0,0）；/*添加它*/
}
.hlink:悬停{
变换：平移3D（0,0,0）比例（1.2）；/*添加它*/
颜色：红色；
背景：rgba（0,0,0,0.6）
}
@关键帧淡入淡出{
从{
不透明度：0；
转换：translate3d（0100%，0）；
}
到{
不透明度：1；
/*变换：translate3d（0,0,0）；*/*删除它*/
}
}
法代努普先生{
动画：fadeInUp 0.3s，两者都轻松；
}
.linkblock a:n子（1）{动画延迟：1.0s；}
.linkblock a:n子（2）{动画延迟：1.1s；}
.linkblock a:n子（3）{动画延迟：1.2s；}
.linkblock a:n子（4）{动画延迟：1.3s；}
.linkblock a:n子（5）{动画延迟：1.4s；}
.linkblock a:n子（6）{动画延迟：1.5s；}
.linkblock a:n子（7）{动画延迟：1.6s；}
.linkblock a:n子（8）{动画延迟：1.7s；}

---

您希望使用

max height

属性设置动画

将最大高度设置为悬停时的50px 将特性本身的最大高度设置为其原始高度

这是一张工作票

最终css文件：

.linkblock{
   margin:20% 0;
  }
  .hlink{
    width:12%;
    height: 60px;
    max-height: 60px; // add this
    opacity:0;
    padding:0 10px;
    background:rgba(0,0,0,0.3);
    display:inline-block;
    text-align: center;
    color:rgba(0,0,0,0.6);
    transition:all 0.5s ease;
  }
  .hlink:hover{
    max-height: 50px; // add this
    color:red;
    background:rgba(0,0,0,0.6)
  }

@keyframes fadeInUp {
    from{
      opacity:0;
      transform:translate3d(0,100%,0);
    }
    to{
      opacity:1;
      transform:translate3d(0,0,0);
    }
  }
  .fadeInUp{
    animation:fadeInUp 0.3s ease-in both;
  }
  .linkblock a:nth-child(1){animation-delay:1.0s;}
  .linkblock a:nth-child(2){animation-delay:1.1s;}
  .linkblock a:nth-child(3){animation-delay:1.2s;}
  .linkblock a:nth-child(4){animation-delay:1.3s;}
  .linkblock a:nth-child(5){animation-delay:1.4s;}
  .linkblock a:nth-child(6){animation-delay:1.5s;}
  .linkblock a:nth-child(7){animation-delay:1.6s;}
  .linkblock a:nth-child(8){animation-delay:1.7s;}

---

问题是使用了

和
，这两种方法允许您保持动画的最后状态，因此动画中的变换将覆盖悬停上永远不会激活的变换

您可以将动画拆分为两个动画，并使用
和
或
转发
，仅使用
不透明度
，动画完成后，您将能够进行过渡


.linkblock{
利润率：20%0；
}
.hlink{
宽度：12%；
高度：60px；
填充：0 10px；
背景：rgba（0,0,0,0.3）；
显示：内联块；
文本对齐：居中；
颜色：rgba（0,0,0,0.6）；
过渡：所有0.5s缓解；
不透明度：0；
}
.hlink:悬停{
转换：转换（0px，-20px）比例（1.2）；
颜色：红色；
背景：rgba（0,0,0,0.6）
}
@关键帧淡入淡出{
从{
转换：translate3d（0,100%，0）；
}
}
@关键帧显示{
到{
不透明度：1；
}
}
法代努普先生{
动画：fadeInUp 0.3s轻松进入，
在前进中表现出0.3秒的轻松；
}
.linkblock a:第n个子项（1）{
动画延迟：1.0s；
}
.linkblock a:第n个子项（2）{
动画延迟：1.1s；
}
.linkblock a:第n个子项（3）{
动画延迟：1.2s；
}
.linkblock a:第n个子项（4）{
动画延迟：1.3s；
}
.linkblock a:第n个子项（5）{
动画延迟：1.4s；
}
.linkblock a:第n个子项（6）{
动画延迟：1.5s；
}
.linkblock a:第n个子项（7）{
动画延迟：1.6s；
}
.linkblock a:第n个子项（8）{
动画延迟：1.7秒；
}

与您的问题相关的代码直接属于您的问题，而不只是转储到外部网站上。请进行相应的编辑。我们没有帮助的TransitionBank。这确实起作用，但是转换失败了。上面给出的“前进”选项在这方面很有帮助。@Tom，没问题这个方法不适用于IE和Edge。还有什么需要的吗@泰马尼