@SeRGaN_87

Разметка плохо или совсем не работает на смартфонах?

Доброго дня, решил я как то сделать что-то вроде анимированной сайт-открытки для своей девушки, с пожеланием "Спокойной ночи" :) ничего необычного, все прекрасно работало на ПК, запускал на файрфоксе, гугл-хроме - все ок, но с мобильными устройствами начались проблемы:
На iphone 7+ (FireFox) , эмодзики судорожно пытались подпрыгнуть согласно своей разметки кей-фрейма, но у них ничего не получалось
На samsung a20( google chrome), если запускать ссылку из WhatsApp , то получается вот такое безобразие:
633c728c54ba1190592223.jpeg
Хотя если зайти в браузер (Хром) и там перейти по ссылке, то все работает. ...
Регулярно обновляюсь, использовал префиксы ... не работает ,как хотелось бы.
Вот ссылка: c9869416.beget.tech (стоит 6 секундная задержка анимации)

Вопрос: 1.Что можно сделать в моем случае?
2.Почему эмодзи перед своей анимацией сначала опускаются перед "подпрыгиванием" , в разметке ничего такого нет
Жду ваших комментарий в том числе справедливой критики по поводу моего кода

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>

<body>
    <main>
        <p class="start">Спокойной ночи Лизанька</p>
        <div class="emodsi">
            <p class="one">&#128536</p>
            <p class="two">&#128536</p>
            <p class="three">&#128536</p>
        </div>
        <p class="end">сладких снов</p>
        <div class="background"></div>
    </main>
</body>
<script>
    window.addEventListener('DOMContentLoaded', () => {
        window.addEventListener('touchstart', (e) => {
            document.querySelector('main').classList.add('active');
        });
        setTimeout(() => {
            document.querySelector('main').classList.add('active')
        }, 8000);
    });
</script>
</html>

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background:  no-repeat  url(./254167811047202.jpg) ;
    background-size: cover;
    z-index: -1;
}
main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100vw;
    height: 100vh;
}
.background {
    -webkit-transition: all 3s linear;
    transition: all 3s linear;
    visibility: hidden;
    background: radial-gradient( 50% 50%, transparent 40%, black);
    opacity: 0;
}
.active .background {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    visibility: visible;
    opacity: 1;
}
@font-face {
    font-family: Marck Script;
    src: url(./MarckScript-Regular.ttf);
}
p {
    color: antiquewhite;
    font-family: "Marck Script";
    font-size: 8vw;
    font-weight: 700;
    text-shadow: 7px 7px 5px black;
    padding: 10vh 0;
    z-index: 5;
}
main > p {
    visibility: hidden;
    opacity: 0;
}
.start {
    -webkit-transition: 3s;
    transition: 3s;
    -webkit-transition-delay: 2s;
            transition-delay: 2s;
}
.end {
    -webkit-transition: 3s;
    transition: 3s;
    -webkit-transition-delay: 7s;
            transition-delay: 7s;
}
.emodsi {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.emodsi p {
    padding: 0 2vw;
    font-size: 13vw;
    text-shadow: none;
    -webkit-transition: 3s;
    transition: 3s;
    -webkit-transition-delay: 3s;
            transition-delay: 3s;
    visibility: hidden;
    opacity: 0;
}
.active > p {
    visibility: visible;
    opacity: 1;
}
.active .emodsi p {
    visibility: visible;
    opacity: 1;
}
.active .one {
    -webkit-animation: lift 6s ease-in-out 4s infinite;
            animation: lift 6s ease-in-out 4s infinite;
}
.active .two {
    -webkit-animation: lift 6s ease-in-out 5s infinite;
            animation: lift 6s ease-in-out 5s infinite;
}
.active .three {
    -webkit-animation: lift 6s ease-in-out 6s infinite;
            animation: lift 6s ease-in-out 6s infinite;
}
@-webkit-keyframes lift {
    
    5% {-webkit-transform: translateY(7vh);transform: translateY(7vh);}
    10% {-webkit-transform: translateY(-7vh);transform: translateY(-7vh);}
    15% {-webkit-transform: translateY(4vh);transform: translateY(4vh);}
    20% {-webkit-transform: translateY(-4vh);transform: translateY(-4vh);}
    22% {-webkit-transform: translateY(2vh);transform: translateY(2vh);}
    24% {-webkit-transform: translateY(-2vh);transform: translateY(-2vh);}
    27% {-webkit-transform: translateY(0);transform: translateY(0);}
}
@keyframes lift {
    5% {-webkit-transform: translateY(7vh);transform: translateY(7vh);}
    10% {-webkit-transform: translateY(-7vh);transform: translateY(-7vh);}
    15% {-webkit-transform: translateY(4vh);transform: translateY(4vh);}
    20% {-webkit-transform: translateY(-4vh);transform: translateY(-4vh);}
    22% {-webkit-transform: translateY(2vh);transform: translateY(2vh);}
    24% {-webkit-transform: translateY(-2vh);transform: translateY(-2vh);}
    27% {-webkit-transform: translateY(0);transform: translateY(0);}
}
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы