Question

大家好，所以我打了一个砖墙，有两个问题：

IE中间的脉冲有效但不是循环进度
在safari（win）中，curcluar进展不起作用
Firefox和Chrome正常运行

有什么想法吗？我真的只有几个小时才能解决这个问题。

注意：您必须单击圆圈才能开始动画。提前感谢您为我解决这个问题的任何帮助。

JSFiddle：http://jsfiddle.net/0pkqk5r0/1/

HTML：

<div id="loader">
    <svg height="80" width="80" viewBox="-10 -10 220 220">
        <path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FF1251" stroke="#FF1251" stroke-width="20" />
        <path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
    </svg>
    <div id="circle"></div>
</div>

CSS：

/* temp */
body {
    background: #072237;
}

h3, p {
    color: #ffffff;
}


#loader {
    position: relative;
    width: 80px;
    height: 80px;
    cursor: pointer;
}

#ring.active {
    -webkit-animation: load 6s 1 forwards;
    -moz-animation: load 6s 1 forwards;
    -o-animation: load 6s 1 forwards;
    -ms-animation: load 6s 1 forwards;
    animation: load 6s 1 forwards;
}

#circle {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    background: #FFFFFF;
    border-radius: 50%;
}

#circle.active {
    background: #FF1251;
    -webkit-animation: pulse 1.2s 3;
    -moz-animation: pulse 1.2s 3;
    -o-animation: pulse 1.2s 3;
    -ms-animation:  pulse 1.2s 3;
    animation: pulse 1.2s 3;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}

/* Pulse */
@-webkit-keyframes pulse {
    0% {
        transform: scale(0.8);
    }
    20% {
        transform: scale(1);
    }
    40% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(0.8);
    }
}

@-moz-keyframes pulse {
    0% {
        transform: scale(0.8);
    }
    20% {
        transform: scale(1);
    }
    40% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(0.8);
    }
}

@-o-keyframes pulse {
    0% {
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    20% {
        -o-transform: scale(1);
        transform: scale(1);
    }
    40% {
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@-ms-keyframes pulse {
    0% {
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    20% {
        -ms-transform: scale(1);
        transform: scale(1);
    }
    40% {
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
    }
    20% {
        transform: scale(1);
    }
    40% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(0.8);
    }
}

/* Loading */

@-webkit-keyframes load {
    80% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-moz-keyframes load {
    80% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-o-keyframes load {
    80% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-ms-keyframes load {
    80% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes load {
    80% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

Answer 1

速记动画将起作用：

IE10 +
Safari 9 +

对旧版本的IE使用HTML + TIME：

.time {behavior: url(#default#time2)}

<div id="circle" class="time" begin="0" end="2" timeAction="style">

对旧版本的Safari使用longhand：

#circle.active {
 -webkit-animation-name: pulse;

 -webkit-animation-duration: 2s;

-webkit-animation-timing-function: linear;

-webkit-animation-iteration-count: 3;
}

<强>参考

用于IE和Safari的SVG CSS动画无法正常工作

1 个答案: