Safari Webkit 转换不起作用

Question

我很难理解为什么我的网站的圆形动画非常适合 Chrome、IE、Opera 和 Firefox 等浏览器，但无法用于 Safari。

JSFiddle

Website

.circle {
    width: 45%;
}
.circle:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
}
.circle div {
    float: left;
    width: 100%;
    padding-top: 50%;
    line-height: 40px;
    margin-top: -20px;
    text-align: center;
}
.circle div span {
	font-size: 50px;
}
.circle .desc {
	font-size: 20px;
	line-height: 29px;
	text-align: center;
}
#left:hover {
    animation: sway 2s infinite ease-in-out;
    -webkit-animation: sway 2s infinite ease-in-out;
    -moz-animation: sway 2s infinite ease-in-out;
    -o-animation: sway 2s infinite ease-in-out;
}
#right:hover {
	animation: swayClock 2s infinite ease-in-out;
    -webkit-animation: swayClock 2s infinite ease-in-out;
    -moz-animation: swayClock 2s infinite ease-in-out;
    -o-animation: swayClock 2s infinite ease-in-out;
}
@keyframes sway {
    0% {
        transform: rotate(0deg);
    }
	100% { transform: rotate(-360deg);
    -webkit-transform: -webkit-rotate(-360deg);
    -ms-transform: -ms-rotate(-360deg);
    -moz-transform: -moz-rotate(-360deg);
    -o-transform: -o-rotate(-360deg);
    }
}
@-webkit-keyframes sway {
    0% {
        transform: rotate(0deg);
    }
	100% { transform: rotate(-360deg);
    -webkit-transform: -webkit-rotate(-360deg);
    -ms-transform: -ms-rotate(-360deg);
    -moz-transform: -moz-rotate(-360deg);
    -o-transform: -o-rotate(-360deg);
    }
}
@keyframes swayClock {
    0% {
        transform: rotate(0deg);
    }
	100% { transform: rotate(360deg);
    -webkit-transform: -webkit-rotate(360deg);
    -ms-transform: -ms-rotate(360deg);
    -moz-transform: -moz-rotate(360deg);
    -o-transform: -o-rotate(360deg);}
}
@-webkit-keyframes swayClock {
    0% {
        transform: rotate(0deg);
    }
	100% { transform: rotate(360deg);
    -webkit-transform: -webkit-rotate(360deg);
    -ms-transform: -ms-rotate(360deg);
    -moz-transform: -moz-rotate(360deg);
    -o-transform: -o-rotate(360deg);}
}
#left {
	float: left;
	padding-right: 5%;
}
#left:after {
	border: 1px solid #2E8AE6;
}
#right {
	float: right;
	padding-left: 5%;
}
#right:after {
	border: 1px solid #FF9900;
}

            <div class="circle" id="left"><div><span>Coding</span><br><p class="desc">I am a strong programmer in <i>Python</i>, <i>Java</i>, <i>Processing</i>, and <i>front-end web development</i>.</p></div></div>
            <div class="circle" id="right"><div><span>Design</span><p class="desc">I have experience in designing <i>sleek</i>, <i>responsive</i> layouts with <i>powerful functionality</i></p></div></div>

Answer 1

修正了你的代码：

JSFiddle

.circle {
    width: 45%;
}

.circle:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.circle div {
    float: left;
    width: 100%;
    padding-top: 50%;
    line-height: 40px;
    margin-top: -20px;
    text-align: center;
}

.circle div span {
    font-size: 50px;
}

.circle .desc {
    font-size: 20px;
    line-height: 29px;
    text-align: center;
}

#left:hover {
    -webkit-animation: sway 2s infinite ease-in-out;
    -moz-animation: sway 2s infinite ease-in-out;
    -o-animation: sway 2s infinite ease-in-out;
    animation: sway 2s infinite ease-in-out;
}

#right:hover {
    animation: swayClock 2s infinite ease-in-out;
    -webkit-animation: swayClock 2s infinite ease-in-out;
    -moz-animation: swayClock 2s infinite ease-in-out;
    -o-animation: swayClock 2s infinite ease-in-out;
}

@keyframes sway {
    0% {
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes sway {
    0% {
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@keyframes swayClock {
    0% {
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes swayClock {
    0% {
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#left {
    float: left;
    padding-right: 5%;
}

#left:after {
    border: 1px solid #2E8AE6;
}

#right {
    float: right;
    padding-left: 5%;
}

#right:after {
    border: 1px solid #FF9900;
}

<div class="circle" id="left">
    <div>
        <span>Coding</span>
        <p class="desc">I am a strong programmer in <i>Python</i>, <i>Java</i>, <i>Processing</i>, and <i>front-end web
            development</i>.
        </p>
    </div>
</div>
<div class="circle" id="right">
    <div>
        <span>Design</span>
        <p class="desc">I have experience in designing <i>sleek</i>, <i>responsive</i> layouts with <i>powerful
            functionality</i>
        </p>
    </div>
</div>

注意——没有价值：-webkit-rotate、-ms-rotate、-moz-rotate、-o-rotate。其他浏览器最新版本支持无前缀属性transform: rotate()，忽略其他，但Safari需要-webkit-transform: rotate()。