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 for animation

.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类。

css 3动画不能处理chrome：@keyframes没有使用转换

1 个答案: