Question

您好我无法将css过渡和动画组合在一起。动画正在运行，但是当我添加转换时，转换有效，但取消了动画。有谁知道如何组合它们？

这是我的CSS：

.circle-spin {
    transition: all 1s ease;
}

.circle-spin-reverse {
    transition: all 1s ease;
}

.success li:hover .circle-spin-reverse {
    animation:spin-reverse 10s linear infinite;
    /* the above works until i add the transition below */

    transform:scale(1.25);
}

.success li:hover .circle-spin {
    animation:spin 10s linear infinite;
    /* the above works until i add the transition below */

    transform:scale(1.25);
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@keyframes spin-reverse { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }

抱歉，我知道它有很多代码，但这只是这个问题所需的最低代码。

由于

Answer 1

这是你的转变

/* in :hover */
transform:scale(1.25);

覆盖动画中的变换

/* in animation */
transform:rotate(360deg);

您必须将转换分隔为不同的元素。请参阅my codepen。

将CSS过渡和动画组合在一起？

1 个答案: