html - 提个css3动画在Safari中兼容的问题

问题描述

问 题

2017.6.24补充：
写了一个效果演示在codepen上：地址
----------------------------------------------分割线-------------------------------------------------------
先介绍下我想实现的效果，如下图，就是一个箭头向右移动的效果

我想试试用flex布局下order这个特性，通过css3动画能否实现，chrome上是可以的，Safari和微信打开确不能正确运行，是我浏览器前缀用的不对，还是这个实现方式太奇葩了，求大佬指点，谢谢:)

html结构：

<div class="u-progress">
    <div class="u-right"></div>
    <div class="u-point"></div>
    <div class="u-point"></div>
    <div class="u-point"></div>
    <div class="u-point"></div>
    <div class="u-point"></div>
</div>

css：

.u-progress .u-right
{
    overflow: hidden;
    animation: progress 4s steps(6) infinite;
    -webkit-animation: progress 4s steps(6) infinite;
    width: .25rem;
    height: .55rem;
    order: 0;
    background: transparent url('../images/progress.png');
    background-position: -.25rem -.55rem;
    background-size: .50rem .55rem;
}
@keyframes progress{
    0%   {order: 0;}
    100% {order: 6;}
}
@-webkit-keyframes progress{
    0%   {order: 0;}
    100% {order: 6;}
}

解决方案

我老老实实改回transform属性来实现动画了

这篇关于html - 提个css3动画在Safari中兼容的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！