Question

我有这个css：

.yellowText {
    color: #FFFF00;
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
    transform: rotate(-20deg);
}

.pulse {
    -webkit-animation: text-anim;
    animation: text-anim 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}

@-webkit-keyframes text-anim {
    0% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}

@keyframes text-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

然后，我将其应用于文本：

<p class="yellowText pulse">Some text here</p>

但是现在，文字动画很好，没有被旋转-20°......任何可能出错的想法？我认为这是transform属性无法使用animation属性的问题。另外，我尝试将transform放在@keyframes text-anim内，但这样做只是定期旋转文本，在其余时间完全正确...

提前感谢您的帮助！

PS：原谅我的英语不好，我是法国人：P

Answer 1

您的@keyframes会覆盖原始转换属性。

@-webkit-keyframes text-anim {
    0% { -webkit-transform: scale(1 rotate(-20deg); }
    50% { -webkit-transform: scale(1.1) rotate(-20deg); }
    100% { -webkit-transform: scale(1) rotate(-20deg); }
}

@keyframes text-anim {
    0% { transform: scale(1) rotate(-20deg); }
    50% { transform: scale(1.1) rotate(-20deg); }
    100% { transform: scale(1) rotate(-20deg); }
}

CSS转换会干扰动画

1 个答案: