CSS转换不能正常工作

我已经创建了一个临时页面，其中包含两个标记中的单词消息。 h1具有css3无限过渡用于阴影动画。CSS转换不能正常工作

阴影对所有方面都可见，但没有过渡。每次持续时间阴影突然变化。

如果您仔细看到阴影，那么您会注意到阴影不是动画正确。阴影在没有动画的情况下突然切换，从上到下，从右到下，从下到左，再从左到顶。

我只是想在所有方面移动阴影。

见我的小提琴这里：

CSS：

h1 { 
    color: #ffffff; 
    vertical-align: middle; 
    height: 100%; 
    display: table-cell; 
    font-size: 5em; 
    text-align: center; 
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.15); 
    animation: message 3s infinite; 
    -webkit-animation: message 3s infinite; 
} 
@keyframes message { 
    25% { 
     text-shadow: 1px 0 3px rgba(0, 0, 0, 0.3); 
    } 
    50% { 
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
    } 
    75% { 
     text-shadow: -1px 0 3px rgba(0, 0, 0, 0.3); 
    } 
    100% { 
     text-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15); 
    } 
} 
@-webkit-keyframes message { 
    25% { 
     -webkit-text-shadow: 1px 0 3px rgba(0, 0, 0, 0.3); 
    } 
    50% { 
     -webkit-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
    } 
    75% { 
     -webkit-text-shadow: -1px 0 3px rgba(0, 0, 0, 0.3); 
    } 
    100% { 
     -webkit-text-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15); 
    } 
}

HTML：

<div class="container"> 
    <h1>Coming Soon&hellip;</h1> 
</div>

来源

2013-11-27 vinaykrsharma

不确定具体是什么意思，但请注意，如果您有-webkit-animation，您还需要有@-webkit-keyframes

来源

2013-11-27 12:04:44 SW4

CSS转换不能正常工作

回答

相关问题