css 3 动画不适用于 chrome : @keyframes not using transition

Question

我正在为我的动画使用以下代码:

<div id="slider" style="width: 230px; height: 150px; padding:5px">
    <div id="mask">
        <ul style="list-style:none;">
            <li class='firstAnimation'>
                <h2>First Word</h2>
            </li>
            <li class="secondAnimation" style="color: red;">
                <h2><strong>Second Word</strong></h2>
            </li>
            <li class="thirdAnimation">
                <h2><strong>Third Word</strong></h2>
            </li>
        </ul>
    </div>
</div>

还有我的动画CSS

.slider {
    max-width: 300px;
    height: 200px;
    margin: 20px auto;
    position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
    position: absolute;
    width: 100%;
    height: 100%;
}
.slide1 {
    background: url(http://media.dunkedcdn.com/assets/prod/40946/3.jpg)no-repeat center;
    background-size: cover;
    animation:fade 8s infinite;
    -webkit-animation:fade 8s infinite;

} 
.slide2 {
    background: url(http://media.dunkedcdn.com/assets/prod/40946/3.jpeg)no-repeat center;
    background-size: cover;
    animation:fade2 8s infinite;
    -webkit-animation:fade2 8s infinite;
}
.slide3 {
    background: url(http://media.dunkedcdn.com/assets/prod/40946/3.jpg)no-repeat center;
    background-size: cover;
    animation:fade3 8s infinite;
    -webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
    0%   {opacity:1}
    33.333% { opacity: 0}
    66.666% { opacity: 0}
    100% { opacity: 1}
}
@keyframes fade2
{
    0%   {opacity:0}
    33.333% { opacity: 1}
    66.666% { opacity: 0 }
    100% { opacity: 0}
}
@keyframes fade3
{
    0%   {opacity:0}
    33.333% { opacity: 0}
    66.666% { opacity: 1}
    100% { opacity: 0}
}

一切都适用于 IE10、Firefox 和 Opera，但不适用于 Chrome。我关注了this代码。任何好的建议将不胜感激。提前致谢

Answer 1

是this example按需工作？

HTML:

<div id="slider" style="width: 230px; height: 150px; padding:5px">
<div id="mask">
    <ul style="list-style:none;">
        <li class='firstAnimation slide1'>
            <h2>First Word</h2>
        </li>
        <li class="secondAnimation slide2" style="color: red;">
            <h2><strong>Second Word</strong></h2>
        </li>
        <li class="thirdAnimation slide3">
            <h2><strong>Third Word</strong></h2>
        </li>
    </ul>
</div>
</div>

CSS:

.slide1 {
animation:fade1 1s infinite;
-webkit-animation:fade1 1s infinite;

} 
.slide2 {
    animation:fade2 1s infinite;
-webkit-animation:fade2 1s infinite;
}
.slide3 {
    animation:fade3 1s infinite;
-webkit-animation:fade3 1s infinite;
}
@keyframes fade1
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

您的 CSS 代码标记有误。您有 slide1、slide2、slide3 等的 css 动画，但在您的 html 代码中没有这样的 css 类。