Question

我想加载开始的动画，然后在：hover上添加另一个动画。问题是，后我离开元件（未悬停）它返回到它的第一动画并重复它。

有什么办法可以避免这种情况的发生？

代码：

    .char {
    animation: slide-down 2s forwards cubic-bezier(0, 1.18, .82, 1.02);
    animation-delay: calc(0s + (0.1s * var(--char-index)));
    animation-iteration-count: 1;
    opacity: 1;


    @keyframes slide-down {
        from {
            transform: translate(-125%, 125%);
            opacity: 1;
        }

        to {
            transform: translate(0%);
            opacity: 1;
        }
    }

    &:hover {
        animation: newAnim 0.4s forwards linear;
        color: red;


        @keyframes newAnim {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(1.2);
            }

        }
    }

}

Answer 1

如果不使用JavaScript，则无法执行此操作。当package com; import com.google.common.io.BaseEncoding; public class TestGuavaBase64EncodingDecoding { private static void printByteArray(String value, byte[] bytes) { System.out.println("decoded " + value + ":"); for (byte b : bytes) { System.out.print(b); System.out.print("."); } System.out.println(""); } private static void testDecodeEncode(String str) { byte[] bytes = BaseEncoding.base64().decode(str); printByteArray("decode(" + str + ")", bytes); String encoded = BaseEncoding.base64().omitPadding().encode(bytes); System.out.println("encoded: " + encoded); } public static void main(String... args) { final String md5_0xFF00 = "0xFF00"; final String md5_0xFF0w = "0xFF0w"; testDecodeEncode(md5_0xFF00); testDecodeEncode(md5_0xFF0w); } }发生时，:hover被重置。这反过来又导致让徘徊去后的第一个动画重复。因此，您将必须使用一些JavaScript才能使其正常工作。

Answer 2

您是否考虑过仅将动画用于初始移动，而将过渡用于:hover效果？这样，animation-iteration-count不会在悬停后重置。本质上，添加以下CSS代码：

.char {
  ...your animations for initial loading

  transition: color 0.4s linear, transform 0.4s linear;
}


.char:hover {
  transform: scale(1.2); 
  color: red;
}

可以在此codepen中找到这种解决方案的示例。

CSS动画和：hover上的动画

2 个答案: