Keyframes动画首次加载失效及移动端断点问题求助

移动端断点失效 #

你没加viewport元标签，这是移动端媒体查询生效的必备项。在<head>标签内添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

动画首次加载不生效 #

1. 清理冲突的动画属性 #

你的.animation类中先定义了完整的动画声明，又单独设置animation-duration，导致属性解析冲突。合并为统一的简写形式，并添加will-change: transform提示浏览器提前优化动画渲染：

div.animation {
    position: fixed;
    animation: roti 10s infinite linear;
    will-change: transform;
}  

div.animation2 {
    position: fixed;
    animation: rot 10s infinite linear;
    animation-delay: -1s;
    will-change: transform;
}

2. 修正反向旋转的类应用 #

你定义了.animation2对应反向旋转的rot关键帧，但两组图片轮都使用了.animation类，导致旋转方向一致。将.container-fluid2内的所有.animation替换为.animation2即可实现反向旋转。

3. 可选优化：让旋转更顺滑 #

roti关键帧中translate值从-300%变为-400%，会导致图片旋转时向外偏移。若只需纯旋转轮效果，将两个translate值统一：

@keyframes roti {
    from {
        transform: rotate(360deg) translate(-300%) rotate(0deg);
    }
    to {
        transform: rotate(0deg) translate(-300%) rotate(360deg);
    }
}

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container-text{
    position: fixed;
    top: 3%;
    left: 3%;
    width: 20%;
    float: left;
    text-align: left;
    display: flex;
}

.container-bottom-text{
    position: fixed;
    bottom: 5%;
    text-align: right;
    right: 5%;
    float: right;
    display: flex;
}

@font-face {
    font-family: Gothambook;
    src: url(/Gotham-Book.otf);
}

h100 {
    font-family: Gothambook;
    font-size: 20px;
}

h200 {
    font-family: Gothambook;
    font-size: 20px;
}

.container-fluid {
   position: fixed;
   bottom: 0;
   right: 0;
}

.container-fluid2 {
   position: fixed;
   top: 0;
   left: 0;
}

div.animation {
        position: fixed;
        animation: roti 10s infinite linear;
        will-change: transform;
}   
  
div.animation2 {
        position: fixed;
        animation: rot 10s infinite linear;
        animation-delay: -1s;
        will-change: transform;
}    

@keyframes rot {
    from {
        transform: rotate(0deg) translate(300%) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translate(300%) rotate(-360deg);
    }
}

@keyframes roti {
    from {
        transform: rotate(360deg) translate(-300%) rotate(0deg);
    }
    to {
        transform: rotate(0deg) translate(-300%) rotate(360deg);
    }
}

img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: auto;
    height: 25vw;
}

@media only screen and (max-width : 800px)  {
    img {
        width: auto;
        height: 95vw;
    }
    
    h100 {
        font-size: 50px;
    }
    
    .container-bottom-text {
        position: fixed;
        bottom: 5%;
        text-align: right;
        right: 5%;
        float: right;
    }

    .container-text {
        position: fixed;
        top: 3%;
        left: 3%;
        width: 30%;
        float: left;
    }
}

img:hover {
  outline: 9px solid #f6e600;
  outline-offset: -4px;
}
</style>
</head>
<body>
<div class="container-text">
    <h100>click any pic to enter</h100>
</div>

<div class="container-bottom-text">
    <h100>for any inquiries please contact <br>scrollingarchives@gmail.com<br> unless it's negative ones then <br>keep that shit to yourself</h100>
</div>

<div class="container-fluid">
    <div class="animation">
        <a href="" target="first"> <img src="/ASSETS/EL_FW16_1.jpg"></a>
    </div>
    
    <div class="animation" style="animation-delay:-1s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW16_2.jpg"></a>
    </div>
    
    <div class="animation" style="animation-delay:-2s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW16_3.jpg"></a>
    </div>
    
    <div class="animation" style="animation-delay:-3s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW16_4.jpg"></a>
    </div>
    
    <div class="animation" style="animation-delay:-4s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW16_5.jpg"></a>
    </div>
    
    <div class="animation" style="animation-delay:-5s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW16_6.jpg"></a>
    </div>
    
    <div class="animation" style="animation-delay:-6s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW16_7.jpg"></a>
    </div>
    
    <div class="animation" style="animation-delay:-7s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW16_8.jpg"></a>
    </div>
    
    <div class="animation" style="animation-delay:-8s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW16_8.jpg"></a>
    </div>
    
    <div class="animation" style="animation-delay:-9s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW16_8.jpg"></a>
    </div>
</div>

<div class="container-fluid2">  
    <div class="animation2">
        <a href="" target="first"> <img src="/ASSETS/EL_FW21_1.jpg"></a>
    </div>
    
    <div class="animation2" style="animation-delay:-1s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW21_2.jpg"></a>
    </div>
    
    <div class="animation2" style="animation-delay:-2s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW21_3.jpg"></a>
    </div>
    
    <div class="animation2" style="animation-delay:-3s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW21_4.jpg"></a>
    </div>
    
    <div class="animation2" style="animation-delay:-4s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW21_5.jpg"></a>
    </div>
    
    <div class="animation2" style="animation-delay:-5s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW21_6.jpg"></a>
    </div>
    
    <div class="animation2" style="animation-delay:-6s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW21_7.jpg"></a>
    </div>
    
    <div class="animation2" style="animation-delay:-7s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW21_8.jpg"></a>
    </div>
    
    <div class="animation2" style="animation-delay:-8s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW21_9.jpg"></a>
    </div>
    
    <div class="animation2" style="animation-delay:-9s;">
        <a href="" target="first"> <img src="/ASSETS/EL_FW21_10.jpg"></a>
    </div>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者quinnpieper