html - CSS 过渡干扰动画

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); }
}