我有这个 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
最佳答案
您的 @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); }
}
关于html - CSS 过渡干扰动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33575679/