html - 如何使悬停延迟：之后

Question

当悬停在元素上时，我希望它缩放（1.2），然后在 0.6 延迟悬停之后：after

我尝试了一些东西，它看起来像这样：

.recipes {
            width: 100%;
            padding: 2rem;
            display:flex;
            flex-wrap: wrap;
            justify-content: space-between;
                
            .mb-3 {
                transition: transform .5s ease 0s;
                
                &:hover {
                    transform: scale(1.3);
                    z-index: 2;
                }
                &::after{
                    transition: background-color ease .6s;
                    
                }
                &:hover::after {
                    content: "Click on me for full Recipe";
                    background-color: black;
                    width: 100%;
                    height: 100%;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 2rem;
                    color: white;
                    position: absolute;
                    filter: opacity(.85);
                }

            }

我希望在比例转换完成后黑色背景和内容可见

现在它没有延迟 :after

Answer 1

您可以用关键帧动画替换过渡并使用动画延迟。