将CSS转换和动画组合在一起？

你好，我无法将css转换和动画结合在一起。动画正在工作，但有一些原因，当我添加一个转换，转换工作，但取消了动画。任何人都知道如何结合他们？将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); } }

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

感谢

来源

2016-08-23 cup_of

动画不需要转换工作。此外，请尝试删除示例中的所有浏览器特定定义，因为它大约是所需数量的代码的5倍。最重要的是，你没有发布你的HTML。 –

感谢您的建议，我编辑我的代码，使其更短 –

这是导致你的变换

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

覆盖在animaton

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

你必须变换分开，不同元素的变换。请参阅my codepen。

来源

2016-08-23 21:57:26 isqua

谢谢你，先生，这是问题 –

将CSS转换和动画组合在一起？

回答

相关问题