我的网站是https://www.timetimiri.info/，但是我的动画在页面顶部有一些问题。CSS动画在我的桌面上工作，但是当我尝试将网页加载到iPhone上时，动画根本不会出现。动画应该只是一个空白空间。这是在Safari浏览器和Chrome浏览器上。任何帮助将不胜感激。
html（我动画的图像是在多/br之后）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tim's Thoughts</title>
<meta charset="UTF-8">
<meta name="description" content="The thoughts of Tim Etimiri.">
<meta name="keywords" content="Tim Etimiri ,thoughts">
<meta name="author" content="Tim Etimiri">
<link rel="shortcut icon" href="darkLord.png" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>
<body>
<div>
<h1>"Life's tragedy is that we get old too soon and wise too late" -
Benjamin Franklin</h1>
<h2><u>Property of Tim Etimiri.</u>
</h2></br></br></br></br></br></br></br></br></br></br>
<img class="image" src="darkLord.png" alt="Tim's Darkest Sun."
width="150" height="150">
<p> "The Dark Lord"</br></br>
My goal is to produce Great Works.</br></br>
For what is a more Noble existence?</p>
<div id="about">
<p><strong>Find Me:</strong></br>
-->Twitter: <a
href="https://www.twitter.com/timetimiri">@timetimiri </a></br>
-->Discord: Tim Etimiri#1511 </br>
-->Email: timetimiri@gmail.com </br></p>
</div>
<h2><u>Works:</u>
<p>
<a href="whatIsIntelligence.html">~What Is Intelligence?</a>
</br></br>
<a href="thePriceOfFreedom.html">~The Price of Freedom</a></br>
</br>
<a href="theNatureOfTheWorldView.html">~The Nature of the World
View</a>
</p>
</h2>
</div>
</body>
</html>
css（动画代码在底部）：
*{
margin: 0px;
padding: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
background-color: #4f575a;
}
p{
margin-left: 80px;
margin-right: 300px;
margin-top: 20px;
color: rgb(216, 231, 245);
}
h2{
color: rgb(3, 104, 192);
font-size: 40px;
}
hr {
display: block;
margin-top: 2em;
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
border-style: dashed;
border-width: .5px;
width: 600px;
color: #ffffff;
}
#index strong{
text-align: center;
margin: 0px;
color: rgb(216, 231, 245);
}
#index hr{
display: block;
margin-top: 2em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: dashed;
border-width: .5px;
width: 600px;
color: #ffffff;
}
h1{
font-size: 17px;
}
#menu a{
color: #ffffff;
text-decoration: none;
font-size: 14px;
padding-top: 19px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
margin-left: 800px;
}
u{
color: rgb(216, 231, 245);
font-size: 35px;
}
strong{
color: rgb(216, 231, 245);
}
img{
margin-left: 80px;
margin-top: 15px;
}
#about strong{
margin-left: 0px;
margin-right: 80px;
margin-top: 20px;
color: rgb(216, 231, 245);
}
a{
color: rgb(142, 233, 240);
}
.image {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin:-264.3px 0 0 -690px;;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 7s linear infinite;
display: block;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg); } }
感谢您的时间。
〜Tim。
尝试调整浏览器窗口的大小，您将看到会发生什么。该图像的位置是绝对的，边距删除了这两个，它将起作用。
this：
margin:-264.3px 0 0 -690px;
它的编码非常糟糕，因为您使用的是剩余50％和最高50％，因此无法使用。这在桌面上起作用，因为桌面宽约为1900px，一半（50％）为950px，并且您的左侧边距为-690px，因此您可以看到它。但是在手机上，您的屏幕宽度约为360px（取决于手机），一半是180px，但在屏幕外部的左侧幅度为-690px。
这意味着，您的动画仍然存在，但被推出左侧的窗户。
我会说删除该线并替换为左：50％，可能是10％
您的代码：
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg); } }
删除-webkit-在您的@keyframes内部类似：
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { transform: rotate(360deg);
transform:rotate(360deg); } }