CSS-анимация работает в браузере рабочего стола, но не в браузере телефона. Любой способ решить это? - PullRequest
Новая
       0

CSS-анимация работает в браузере рабочего стола, но не в браузере телефона. Любой способ решить это?

0 голосов
/ 23 марта 2019

Мой веб-сайт 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); } }

Спасибо за ваше время.

~ Тим.

Ответы [ 3 ]

0 голосов
/ 23 марта 2019

Это: 

   margin:-264.3px 0 0 -690px;

Очень плохо закодировано, это не сработает, потому что вы используете левые 50% и верхние 50%.Это работает на рабочем столе, потому что рабочий стол имеет ширину около 1900px, половина (50%) составляет 950px, и вы оставляете марку -690px слева, чтобы вы могли видеть ее.Но на мобильном телефоне у вас ширина экрана около 360px (зависит от телефона), половина составляет 180px, но вы оставляете ее на -690px слева от экрана.

Это означает, что ваша анимация все еще там, но нажатаиз окна окна слева.

Я бы сказал, удалите эту строку и замените левую: 50%, возможно, 10%

0 голосов
/ 23 марта 2019

ваш код: 

@-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); } }
0 голосов
/ 23 марта 2019

Попробуйте изменить размер окна вашего браузера, и вы увидите, что произойдет.Изображение расположено абсолютно с полем, удалите эти два, и это будет работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...