Safari上的CSS翻译问题 [英] CSS Translate Issue on Safari
本文介绍了Safari上的CSS翻译问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在将我制作的Gif转换为CSS动画.一切都可以在Chrome，Firefox，Opera上运行，但在Safari上却可以运行.
I am working on converting a Gif I made to a CSS animation. Everything works on Chrome, Firefox, Opera, but when it comes to Safari it acts up.
最初加载页面时，图像会忽略平移并位于下面，但是一旦我从Safari选项卡中单击并返回时，页面就会更新，并且图像具有Translate给出的适当坐标.
When I initially load the page the images ignore translate and sit below, but once I click out of the Safari tab and back in, the page is updated and the images have the appropriate coordinates given by Translate.
有人知道为什么会这样吗?
Does anyone know why this would be happening?
HTML:
<section>
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Globe.png" class="globe center" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Red.png" class="center redSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Orange.png" class="center orangeSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Yellow.png" class="center yellowSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Green.png" class="center greenSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Blue.png" class="center blueSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Indigo.png" class="center indigoSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Violet.png" class="center violetSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Continents.png" class="center continent" width="170%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/GlobeMask.png" class="center knockOut" width="190%">
</section>
CSS:
*{
margin: 0px;
padding: 0px;
}
body{
background-color:#333;
overflow: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display:block;
}
.continent{
left: 72%;
animation:slide 9s infinite;
animation-timing-function: linear;
z-index: 3;
transform: translate(-50%,-50%);
}
.globe{
z-index: 2;
transform: translate(-50%, -50%);
}
.knockOut{
z-index: 4;
transform: translate(-50%,-50%);
}
/*All working above!*/
/*ANIMATION*/
/*Content Slide Animation*/
.slide{
animation: ;
}
@-webkit-keyframes slide {
from{left: 71%;}
to{left: 28.5%;}
}
@-moz-keyframes slide {
from{left: 71%;}
to{left: 28.5%;}
}
@keyframes slide {
from{left: 71%;}
to{left: 28.5%;}
}
/*Red Arc Animation*/
.redSpin {
-webkit-animation:spinRed 10s linear infinite;
-moz-animation:spinRed 10s linear infinite;
-o-animation:spinRed 10s linear infinite;
animation:spinRed 10s linear infinite;
}
@-o-keyframes spinRed {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
60% { -o-transform: translate(-50%,-50%) rotate(540deg); }
100% { -o-transform: translate(-50%,-50%) rotate(1080deg); }
}
@-moz-keyframes spinRed {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
60% { -moz-transform: translate(-50%,-50%) rotate(540deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); }
}
@-webkit-keyframes spinRed {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
60% { -webkit-transform: translate(-50%,-50%) rotate(540deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); }
}
@keyframes spinRed {
0% { transform: translate(-50%,-50%) rotate(0deg); }
60% { transform: translate(-50%,-50%) rotate(540deg); }
100% { transform: translate(-50%,-50%) rotate(1080deg); }
}
/*Orange Arc Animation*/
.orangeSpin {
-webkit-animation:spinOrange 5s linear infinite;
-moz-animation:spinOrange 5s linear infinite;
-o-animation:spinOrange 5s linear infinite;
animation:spinOrange 5s linear infinite;
}
@-o-keyframes spinOrange {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(-720deg); }
}
@-moz-keyframes spinOrange {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(-720deg); }
}
@-webkit-keyframes spinOrange {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(-720deg); }
}
@keyframes spinOrange {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(-720deg); }
}
/*Yellow Arc Animation*/
.yellowSpin {
-webkit-animation:yellowSpin 10s linear infinite;
-moz-animation:yellowSpin 10s linear infinite;
-o-animation:yellowSpin 10s linear infinite;
animation:yellowSpin 10s linear infinite;
}
@-o-keyframes yellowSpin {
0% { -o-transform: translate(-50%,-50%) rotate(-0deg); }
50% {-o-transform: translate(-50%,-50%) rotate(-380deg);}
100% { -o-transform: translate(-50%,-50%) rotate(-1080deg); }
}
@-moz-keyframes yellowSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(-0deg); }
50% {-moz-transform: translate(-50%,-50%) rotate(-380deg);}
100% { -moz-transform: translate(-50%,-50%) rotate(-1080deg); }
}
@-webkit-keyframes yellowSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(-0deg); }
50% {-webkit-transform: translate(-50%,-50%) rotate(-380deg);}
100% { -webkit-transform: translate(-50%,-50%) rotate(-1080deg); }
}
@keyframes yellowSpin {
0% { transform: translate(-50%,-50%) rotate(-0deg); }
50% {transform: translate(-50%,-50%) rotate(-380deg);}
100% { transform: translate(-50%,-50%) rotate(-1080deg); }
}
/*Green Arc Animation*/
.greenSpin {
-webkit-animation:greenSpin 10s linear infinite;
-moz-animation:greenSpin 10s linear infinite;
-o-animation:greenSpin 10s linear infinite;
animation:greenSpin 10s linear infinite;
}
@-o-keyframes greenSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(1080deg); }
}
@-moz-keyframes greenSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); }
}
@-webkit-keyframes greenSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); }
}
@keyframes greenSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(1080deg); }
}
/*Blue Arc Animation*/
.blueSpin {
-webkit-animation:blueSpin 10s linear infinite;
-moz-animation:blueSpin 10s linear infinite;
-o-animation:blueSpin 10s linear infinite;
animation:blueSpin 10s linear infinite;
}
@-o-keyframes blueSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
50% {-o-transform: translate(-50%,-50%) rotate(-530deg);}
100% { -o-transform: translate(-50%,-50%) rotate(-1080deg); }
}
@-moz-keyframes blueSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
50% {-moz-transform: translate(-50%,-50%) rotate(-530deg);}
100% { -moz-transform: translate(-50%,-50%) rotate(-1080deg); }
}
@-webkit-keyframes blueSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
50% {-webkit-transform: translate(-50%,-50%) rotate(-530deg);}
100% { -webkit-transform: translate(-50%,-50%) rotate(-1080deg); }
}
@keyframes blueSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
50% {transform: translate(-50%,-50%) rotate(-530deg);}
100% { transform: translate(-50%,-50%) rotate(-1080deg); }
}
/*Indigo Arc Animation*/
.indigoSpin {
-webkit-animation:indigoSpin 10s linear infinite;
-moz-animation:indigoSpin 10s linear infinite;
-o-animation:indigoSpin 10s linear infinite;
animation:indigoSpin 10s linear infinite;
}
@-o-keyframes indigoSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(1080deg); }
}
@-moz-keyframes indigoSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); }
}
@-webkit-keyframes indigoSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); }
}
@keyframes indigoSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(1080deg); }
}
/*Violet Arc Animation*/
.violetSpin {
-webkit-animation:violetSpin 10s linear infinite;
-moz-animation:violetSpin 10s linear infinite;
-o-animation:violetSpin 10s linear infinite;
animation:violetSpin 10s linear infinite;
}
@-o-keyframes violetSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(360deg); }
}
@-moz-keyframes violetSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(360deg); }
}
@-webkit-keyframes violetSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes violetSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}
CodePen: http://codepen.io/Cole-Campbell/pen/MJVxdK
推荐答案
您可以使用供应商前缀进行以下所有转换.它对我有用.
You can use vendor prefix for transform like below for all. It's working for me.
-webkit-transform: translate(-50%,-50%);
-webkit-transform: -webkit-translate(-50%,-50%);
您也可以在此处 caniuse.com 以获得供应商浏览器支持.
You can also check here caniuse.com for vendor browser support.
这篇关于Safari上的CSS翻译问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
