我的网站是https://www.timetimiri.info/，但我的页面顶部有一些动画问题。 CSS动画可以在我的桌面上运行，但是当我尝试在我的iPhone上加载网页时，动画根本就不显示。动画应该只是一个空的空间。这是在Safari浏览器和Chrome浏览器btw上。任何帮助将不胜感激。
HTML（图像I动画是在多个/ 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: [email protected] </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); } }
谢谢你的时间。
〜蒂姆。
尝试调整浏览器窗口的大小，您将看到会发生什么。图像位于绝对位置，边距会移除这两个图像并且可以正常工作。
这个：
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); } }
在你的@keyframes中删除-webkit-如下：
@-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); } }