Question

我使用关键帧创建了简单的进度条相似的动画。似乎无法在Windows Safari 5.1.7上运行，也在mac safari上运行（无法提供版本）。这是我创建的小提琴http://jsfiddle.net/26tgnrff/4/。一直在挖掘，但无法找到解决方案。

感谢。

HTML：

<div class="content">
            <h3>Animation demo</h3>

        <ul id="skill">
            <li><span class="animated expand y2003 green"></span> 
            </li>
            <li><span  class="animated expand y2006 purple"></span>
            </li>
            <li><span  class="animated expand y2008 green"></span>
            </li>
            <li><span  class="animated expand y2011 purple"></span>
            </li>
            <li><span class="animated expand y2014 green"></span>
            </li>
        </ul>
</div>

css：

.expand {
    height: 25px;
    margin: 2px 0;
    position: absolute;
}
.expand.green {
    background: #8DD005;
    box-shadow: 0px 0px 7px 0px #86a624;
}
.expand.purple {
    background: #5a3266;
    box-shadow: 0px 0px 7px 0px #5a3266;
}
.animated.y2003 {
    width: 15%;
    -moz-animation: html5 2s ease-out;
    -webkit-animation: html5 2s ease-out;
    animation: html5 2s ease-out;
}
.animated.y2006 {
    width: 52.5%;
    -moz-animation: css3 2s ease-out;
    -webkit-animation: css3 2s ease-out;
    animation: css3 2s ease-out;
}
.animated.y2008 {
    width: 84.7%;
    -moz-animation: jquery 2s ease-out;
    -webkit-animation: jquery 2s ease-out;
    animation: jquery 2s ease-out;
}
.animated.y2011 {
    width: 77.5%;
    -moz-animation: photoshop 2s ease-out;
    -webkit-animation: photoshop 2s ease-out;
    animation: photoshop 2s ease-out;
}
.animated.y2014 {
    width: 100%;
    -moz-animation: dreamweaver 2s ease-out;
    -webkit-animation: dreamweaver 2s ease-out;
    animation: dreamweaver 2s ease-out;
}
@-moz-keyframes html5 {
    from {
        width: 5px;
    }
   to {
        width: 15%;
    }

}
@-moz-keyframes css3 {
    from {
        width: 5px;
    }
    to {
        width: 52.5%;
    }

}
@-moz-keyframes jquery {
    from {
        width: 5px;
    }
   to {
        width: 84.7%;
    }

}
@-moz-keyframes photoshop {
    from {
        width: 5px;
    }
to {
        width: 77.5%;
    }

}
@-moz-keyframes dreamweaver {
    from {
        width: 5px;
    }
    to {
        width: 100%;
    }

}
@-webkit-keyframes'html5' {
    from {
        width: 5px;
    }
    to {
        width: 15%;
    }

}
@-webkit-keyframes'css3' {
    from {
        width: 5px;
    }
    to {
        width: 52.5%;
    }

}
@-webkit-keyframes'jquery' {
    from {
        width: 5px;
    }
    to {
        width: 84.7%;
    }

}
@-webkit-keyframes'photoshop' {
    from {
        width: 5px;
    }
    to {
        width: 77.5%;
    }

}
@-webkit-keyframes'dreamweaver' {
   from {
        width: 5px;
    }
    to {
        width: 100%;
    }

}

Answer 1

你的关键帧末尾有额外的分号 - 应该是例如。

@-webkit-keyframes'photoshop' {
    from {
        width: 5px;
    }
    to {
        width: 77.5%;
    }
    /* no semicolon here */
}

更新了小提琴http://jsfiddle.net/26tgnrff/8/

此外，在Safari 5上，您无法将width设置为百分比值。如果您使用px值而不是%，则动画将起作用。

但是，您可以通过缩放来实现类似的效果，然后您不需要关键帧中的实际值：

@-webkit-keyframes'html5' {
    from {
        -webkit-transform-origin: 0 0;
        -webkit-transform: scale(0,1);
    }
    to {
        -webkit-transform-origin: 0 0;
        -webkit-transform: scale(1,1);
    }
}

更新小提琴（仅将第一个动画设为动画作为示例）http://jsfiddle.net/26tgnrff/9/

关键帧的Css3动画在Safari中没有动画效果

1 个答案: