我有一个SVG，我用CSS关键帧制作动画。
parentModel.definition.toJSON()<a class="bolster-banner" href="http://example.com" target="_blank">
<svg width="283" height="30" viewBox="0 0 283 30" xmlns="http://www.w3.org/2000/svg"><title>Met trots gemaakt door Bolster</title><g fill="none"><path d="M209.468 9.864s5.452.947 5.913 2.342c.444 1.395-3.396 5.337-3.396 5.337s.775 5.471-.415 6.339c-1.189.846-6.153-1.573-6.153-1.573s-4.962 2.419-6.155 1.573c-1.189-.869-.401-6.339-.401-6.339s-3.837-3.942-3.41-5.337c.465-1.396 5.914-2.342 5.914-2.342s2.573-4.864 4.053-4.864c1.447 0 4.052 4.864 4.052 4.864z" fill="#000" class="bolster-banner-star" id="bolster-banner-star" /><path d="M234.144 15.4c.944-.336 1.504-1.376 1.504-2.384 0-1.776-1.376-2.896-3.728-2.896h-5.376v10.88h5.696c2.432 0 3.888-1.216 3.888-3.024 0-1.168-.656-2.288-1.984-2.576zm-4.896-3.072h2.24c1.04 0 1.584.368 1.584 1.056 0 .704-.56 1.168-1.584 1.168h-2.24v-2.224zm0 6.432v-2.144h2.688c.992 0 1.552.336 1.552 1.008 0 .64-.496 1.136-1.616 1.136h-2.624zm12.192-5.696c-2.464 0-4.224 1.712-4.224 4.048 0 2.368 1.76 4.128 4.224 4.128 2.448 0 4.192-1.76 4.192-4.128 0-2.336-1.744-4.048-4.192-4.048zm0 5.936c-1.072 0-1.76-.832-1.76-1.872 0-1.008.688-1.824 1.76-1.824 1.04 0 1.744.816 1.744 1.824 0 1.04-.704 1.872-1.744 1.872zm8.224-9.36h-2.608v11.36h2.608v-11.36zm1.232 8.688c.16 2.064 1.808 2.912 3.824 2.912 2.032 0 3.648-.832 3.648-2.624 0-1.376-.976-2.08-2.432-2.352l-1.44-.24c-.624-.112-.816-.352-.816-.608 0-.304.32-.56.976-.56.72 0 1.264.272 1.312.864h2.32c-.128-2.048-1.984-2.688-3.632-2.688-2.064 0-3.472.96-3.472 2.592 0 1.36.944 2.112 2.288 2.336l1.568.272c.512.08.752.288.752.544 0 .336-.432.544-1.12.544-.8 0-1.36-.304-1.472-.976l-2.304-.016zm14.8.336c-.576.112-1.008.192-1.376.192-.768 0-1.216-.384-1.216-1.168v-2.224h2.64v-2.224h-2.64v-2.64h-2.592v2.64h-1.52v2.224h1.52v2.304c0 2.096 1.248 3.472 3.12 3.472.768 0 1.344-.064 2.352-.384l-.288-2.192zm9.328-1.712c0-2.336-1.712-3.888-3.952-3.888-2.496 0-4.144 1.696-4.144 4.048 0 2.368 1.696 4.064 4.24 4.064 1.92 0 3.408-1.008 3.792-2.608h-2.576c-.224.352-.64.56-1.184.56-.992 0-1.536-.544-1.744-1.248h5.52c.048-.304.048-.624.048-.928zm-3.968-1.888c.832 0 1.392.448 1.536 1.296h-3.152c.192-.784.736-1.296 1.616-1.296zm10.672-1.952c-1.152 0-1.984.368-2.672.96v-.832h-2.608v7.76h2.608v-4.448c.608-.592 1.408-.928 2.672-.976v-2.464z" fill="#333" /><path d="M12.208 10.12h-1.136l-4.288 7.056-4.288-7.056h-1.12v10.88h1.536l-.032-7.552 3.424 5.616h.976l3.392-5.568v7.504h1.536v-10.88zm9.792 7.072c-.016-2.256-1.536-3.856-3.648-3.856-2.336 0-3.92 1.712-3.92 3.936 0 2.208 1.584 3.92 3.92 3.92 1.68 0 3.024-.848 3.456-2.176h-1.584c-.304.576-.944.928-1.824.928-1.456 0-2.304-.944-2.512-2.112h6.048v-.016l.032.016c.032-.208.032-.432.032-.64zm-3.712-2.592c1.264 0 2.08.848 2.224 2.128h-4.624c.192-1.2 1.04-2.128 2.4-2.128zm10.72 5.088c-.384.112-.848.192-1.248.192-1.024 0-1.552-.496-1.552-1.664v-3.456h2.8v-1.232h-2.8v-2.752h-1.472v2.752h-1.84v1.232h1.84v3.456c0 1.936 1.008 3.024 2.752 3.024.576 0 .992-.064 1.744-.288l-.224-1.264zm11.28 0c-.384.112-.848.192-1.248.192-1.024 0-1.552-.496-1.552-1.664v-3.456h2.8v-1.232h-2.8v-2.752h-1.472v2.752h-1.84v1.232h1.84v3.456c0 1.936 1.008 3.024 2.752 3.024.576 0 .992-.064 1.744-.288l-.224-1.264zm3.52-6.16h-1.472v7.472h1.472v-4.784c.672-.928 1.616-1.44 2.816-1.472v-1.392c-1.168 0-2.128.48-2.816 1.28v-1.104zm8.096-.192c-2.272 0-3.984 1.68-3.984 3.936 0 2.256 1.712 3.968 3.984 3.968 2.24 0 3.968-1.712 3.968-3.968 0-2.256-1.728-3.936-3.968-3.936zm0 6.56c-1.472 0-2.512-1.168-2.512-2.624 0-1.44 1.04-2.592 2.512-2.592 1.44 0 2.48 1.152 2.48 2.592 0 1.456-1.04 2.624-2.48 2.624zm10.976-.208c-.384.112-.848.192-1.248.192-1.024 0-1.552-.496-1.552-1.664v-3.456h2.8v-1.232h-2.8v-2.752h-1.472v2.752h-1.84v1.232h1.84v3.456c0 1.936 1.008 3.024 2.752 3.024.576 0 .992-.064 1.744-.288l-.224-1.264zm1.536-1.12c.208 1.888 1.648 2.672 3.472 2.672 1.872 0 3.232-.864 3.232-2.4 0-1.424-1.136-1.92-2.24-2.112l-1.44-.24c-.928-.16-1.264-.544-1.264-1.008 0-.592.592-1.024 1.632-1.024s1.792.416 1.904 1.296l1.36-.016c-.16-1.872-1.872-2.432-3.28-2.432-1.824 0-3.072.88-3.072 2.304 0 1.328 1.04 1.888 2.224 2.08l1.664.288c.672.112 1.104.448 1.104.976 0 .672-.72 1.088-1.776 1.088-1.232 0-1.952-.496-2.144-1.456l-1.376-.016zm20.496-5.04h-1.472v.592c-.672-.56-1.552-.88-2.56-.88-2.112 0-3.76 1.648-3.76 3.872 0 2.032 1.648 3.76 3.76 3.76 1.008 0 1.888-.32 2.56-.864v1.104c0 1.504-.944 2.384-2.304 2.384-1.248 0-2.096-.656-2.272-1.616h-1.488c.224 1.744 1.744 2.944 3.76 2.944 2.224 0 3.776-1.424 3.776-3.712v-7.584zm-3.824 6.08c-1.456 0-2.496-1.232-2.496-2.496 0-1.472 1.04-2.592 2.496-2.592.912 0 1.76.368 2.352 1.232v2.608c-.592.864-1.44 1.248-2.352 1.248zm13.504-2.416c-.016-2.256-1.536-3.856-3.648-3.856-2.336 0-3.92 1.712-3.92 3.936 0 2.208 1.584 3.92 3.92 3.92 1.68 0 3.024-.848 3.456-2.176h-1.584c-.304.576-.944.928-1.824.928-1.456 0-2.304-.944-2.512-2.112h6.048v-.016l.032.016c.032-.208.032-.432.032-.64zm-3.712-2.592c1.264 0 2.08.848 2.224 2.128h-4.624c.192-1.2 1.04-2.128 2.4-2.128zm14.88-1.312c-1.264 0-2.112.432-2.896 1.248-.56-.8-1.456-1.248-2.512-1.248-1.024 0-1.68.336-2.24.912v-.672h-1.472v7.472h1.472v-5.184c.56-.816 1.264-1.2 1.952-1.2 1.248 0 1.984.816 1.984 2.24v4.144h1.472v-4.224c0-.32-.032-.64-.096-.928.576-.88 1.312-1.232 2.048-1.232 1.248 0 1.984.816 1.984 2.24v4.144h1.456v-4.224c0-2.128-1.344-3.488-3.152-3.488zm12.8.24h-1.472v.656c-.64-.528-1.504-.848-2.496-.848-2.112 0-3.808 1.744-3.808 3.936 0 2.176 1.696 3.92 3.808 3.92.992 0 1.856-.32 2.496-.848v.656h1.472v-7.472zm-3.76 6.384c-1.456 0-2.544-1.232-2.544-2.64 0-1.44 1.088-2.656 2.544-2.656.896 0 1.712.352 2.288 1.2v2.896c-.576.848-1.392 1.2-2.288 1.2zm13.6-6.384h-1.472v.656c-.64-.528-1.504-.848-2.496-.848-2.112 0-3.808 1.744-3.808 3.936 0 2.176 1.696 3.92 3.808 3.92.992 0 1.856-.32 2.496-.848v.656h1.472v-7.472zm-3.76 6.384c-1.456 0-2.544-1.232-2.544-2.64 0-1.44 1.088-2.656 2.544-2.656.896 0 1.712.352 2.288 1.2v2.896c-.576.848-1.392 1.2-2.288 1.2zm9.184-2.24l2.768 3.328h1.904l-3.632-4.352 3.12-3.12h-1.872l-3.744 3.664v-7.552h-1.472v11.36h1.472v-1.872l1.456-1.456zm11.072 2.016c-.384.112-.848.192-1.248.192-1.024 0-1.552-.496-1.552-1.664v-3.456h2.8v-1.232h-2.8v-2.752h-1.472v2.752h-1.84v1.232h1.84v3.456c0 1.936 1.008 3.024 2.752 3.024.576 0 .992-.064 1.744-.288l-.224-1.264zm13.728-10.048h-1.472v4.544c-.64-.544-1.504-.848-2.496-.848-2.112 0-3.808 1.744-3.808 3.92s1.696 3.92 3.808 3.92c.992 0 1.856-.304 2.496-.848v.672h1.472v-11.36zm-3.76 10.272c-1.456 0-2.544-1.232-2.544-2.656 0-1.424 1.088-2.64 2.544-2.64.896 0 1.712.352 2.288 1.2v2.896c-.576.832-1.392 1.2-2.288 1.2zm9.808-6.576c-2.272 0-3.984 1.68-3.984 3.936 0 2.256 1.712 3.968 3.984 3.968 2.24 0 3.968-1.712 3.968-3.968 0-2.256-1.728-3.936-3.968-3.936zm0 6.56c-1.472 0-2.512-1.168-2.512-2.624 0-1.44 1.04-2.592 2.512-2.592 1.44 0 2.48 1.152 2.48 2.592 0 1.456-1.04 2.624-2.48 2.624zm9.632-6.56c-2.272 0-3.984 1.68-3.984 3.936 0 2.256 1.712 3.968 3.984 3.968 2.24 0 3.968-1.712 3.968-3.968 0-2.256-1.728-3.936-3.968-3.936zm0 6.56c-1.472 0-2.512-1.168-2.512-2.624 0-1.44 1.04-2.592 2.512-2.592 1.44 0 2.48 1.152 2.48 2.592 0 1.456-1.04 2.624-2.48 2.624zm7.488-6.368h-1.472v7.472h1.472v-4.784c.672-.928 1.616-1.44 2.816-1.472v-1.392c-1.168 0-2.128.48-2.816 1.28v-1.104z" fill="#333" /></g></svg>
</a>
- ＆GT; https://jsfiddle.net/h38soz2u/
当我在Chrome或Firefox中查看时，动画按预期工作：悬停时，星形旋转并循环显示多种颜色。我正在为明星的.bolster-banner{
display: inline-block;
max-width: 80%;
svg{
display: inline-block;
opacity: .4;
transition: opacity .2s linear;
}
path.bolster-banner-star{
fill: #000;
transform: rotate(0deg) scale(1);
transform-origin:205px 15px 0;
animation: none;
}
&:hover{
svg{
opacity: 1;
path.bolster-banner-star{
animation:
spin 20s infinite linear;
}
}
}
&-home{
padding: 50px 0 100px;
text-align: center;
}
&-article{
padding: 100px 0 170px;
text-align: center;
}
}
@keyframes spin {
0% {
fill: #00A894;
transform: rotate(0deg) scale(1.3);
}
5%{
fill: #0083C4;
}
10%{
fill: #D059B2;
}
15% {
fill: #5D54A4;
}
20%{
fill: #FFBC32;
}
25% {
fill: #00A894;
}
30%{
fill: #0083C4;
}
35%{
fill: #D059B2;
}
40%{
fill: #5D54A4;
}
45%{
fill: #FFBC32;
}
50% {
fill: #00A894;
}
55%{
fill: #0083C4;
}
60%{
fill: #D059B2;
}
65%{
fill: #5D54A4;
}
70%{
fill: #FFBC32;
}
75% {
fill: #00A894;
}
80%{
fill: #0083C4;
}
85%{
fill: #D059B2;
}
90%{
fill: #5D54A4;
}
95%{
fill: #FFBC32;
}
100% {
fill: #00A894;
transform: rotate(360deg) scale(1.3);
}
}
制作动画。
在Safari（9.1.1）中，星形旋转但不显示颜色。
我尝试了不同的值顺序，我也尝试将星的旋转和颜色的循环分成两个fill组。
目前无法在Safari中设置@keyframe动画吗？
答案 0 :(得分：0)
因为没有此前缀-webkit-的Safari中不支持动画。
在这样的css中添加此前缀，代码将起作用。
.bolster-banner{
display: inline-block;
max-width: 80%;
svg{
display: inline-block;
opacity: .4;
transition: opacity .2s linear;
-webkit-transition: opacity .2s linear;
}
path.bolster-banner-star{
fill: #000;
transform: rotate(0deg) scale(1);
transform-origin:205px 15px 0;
-webkit-transform: rotate(0deg) scale(1);
-webkit-transform-origin:205px 15px 0;
animation: none;
-webkit-animation: none;
}
&:hover{
svg{
opacity: 1;
path.bolster-banner-star{
animation:
spin 20s infinite linear;
}
}
}
&-home{
padding: 50px 0 100px;
text-align: center;
}
&-article{
padding: 100px 0 170px;
text-align: center;
}
}
@keyframes spin {
0% {
fill: #00A894;
transform: rotate(0deg) scale(1.3);
-webkit-transform: rotate(0deg) scale(1.3);
}
5%{
fill: #0083C4;
}
10%{
fill: #D059B2;
}
15% {
fill: #5D54A4;
}
20%{
fill: #FFBC32;
}
25% {
fill: #00A894;
}
30%{
fill: #0083C4;
}
35%{
fill: #D059B2;
}
40%{
fill: #5D54A4;
}
45%{
fill: #FFBC32;
}
50% {
fill: #00A894;
}
55%{
fill: #0083C4;
}
60%{
fill: #D059B2;
}
65%{
fill: #5D54A4;
}
70%{
fill: #FFBC32;
}
75% {
fill: #00A894;
}
80%{
fill: #0083C4;
}
85%{
fill: #D059B2;
}
90%{
fill: #5D54A4;
}
95%{
fill: #FFBC32;
}
100% {
fill: #00A894;
transform: rotate(360deg) scale(1.3);
-webkit-transform: rotate(360deg) scale(1.3);
}
}
@-webkit-keyframes spin {
0% {
fill: #00A894;
transform: rotate(0deg) scale(1.3);
-webkit-transform: rotate(0deg) scale(1.3);
}
5%{
fill: #0083C4;
}
10%{
fill: #D059B2;
}
15% {
fill: #5D54A4;
}
20%{
fill: #FFBC32;
}
25% {
fill: #00A894;
}
30%{
fill: #0083C4;
}
35%{
fill: #D059B2;
}
40%{
fill: #5D54A4;
}
45%{
fill: #FFBC32;
}
50% {
fill: #00A894;
}
55%{
fill: #0083C4;
}
60%{
fill: #D059B2;
}
65%{
fill: #5D54A4;
}
70%{
fill: #FFBC32;
}
75% {
fill: #00A894;
}
80%{
fill: #0083C4;
}
85%{
fill: #D059B2;
}
90%{
fill: #5D54A4;
}
95%{
fill: #FFBC32;
}
100% {
fill: #00A894;
transform: rotate(360deg) scale(1.3);
-webkit-transform: rotate(360deg) scale(1.3);
}
}