将 CSS 过渡和动画结合在一起？答案

【问题标题】：Combining CSS transition and animations together?将 CSS 过渡和动画结合在一起？
【发布时间】：2016-08-24 05:57:26
【问题描述】：

您好，我在将 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); } }

对不起，我知道代码很多，但这是这个问题所需的最低限度的代码。

谢谢

【问题讨论】：

动画不需要过渡即可工作。此外，请尝试在此处删除示例中的所有浏览器特定定义，因为它大约是所需代码量的 5 倍。最重要的是，您没有发布您的 HTML。
感谢您的建议，我编辑了我的代码以使其更短

标签： css animation css-animations

【解决方案1】：

这是你的转变

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

覆盖动画中的变换

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

您必须将转换分离到不同的元素。见my codepen。

【讨论】：