CSS驗證器拋出解析錯誤與CSS動畫媒體查詢

Question

這很有趣，因爲我真的找不到任何事情在網上，真的爲什麼我的代碼拋出一個分析錯誤。下面的代碼顯示我有一個媒體查詢，基本上改變了一些元素及其屬性。

當我驗證此代碼時，由於游泳動畫，它會拋出解析錯誤，當我刪除此動畫並重新驗證它通過的代碼時沒有任何問題。

這可以修復或只是可以忽略的東西:)？

@media (max-width: 1325px) { 
    #chapter-one-background, #chapter-two-background, #chapter-three-background { 
    height: 450px; } 

    #sound-button { 
    width: 21px; } 

    .buttonCenter { 
    padding: 50px 0px 20px 0px;} 

    html { 
    font-size: 1em; } 

    h1 { 
    font-size: 3em; } 

    h2 { 
    font-size: 2.027em; } 

    h3 { 
    font-size: 1.199em; } 

    h4 { 
    font-size: 1em; } 

    .button-wrapper { 
    padding-top: 50px; } 
    .button-wrapper .buttons img { 
     max-width: 90%; } 

    .exchange-list img { 
    max-width: 20%; } 
    .exchange-list .list-float-right { 
    width: 230px; } 

    .article-center { 
    width: 300px; } 

    .article-info { 
    width: 350px; } 
    .article-info img:last-child { 
     width: 100%; } 

    #cloud-background { 
    padding: 2% 2% 4% 2%; } 

    .article-center-video { 
    width: 400px; } 
    .article-center-video .article-info-video { 
     width: 400px; } 

    .eyes-container { 
    margin-top: 280px; } 

    .sun { 
    top: -300px; } 

    #cowhead1 { 
    top: 100px; 
    left: 100px; } 
    #cowhead1 img { 
     width: 90px; } 

    #hands-behind-left { 
    height: 663px; } 

    #chapter-four-background-left { 
    height: 663px; } 

    #cowhead2 { 
    top: 100px; 
    left: 180px; } 
    #cowhead2 img { 
     width: 90px; } 

    #info2-chapter3 { 
    padding-top: 80px; } 

    #exchange-chapter3 { 
    padding-top: 90px; 
    left: 15%; } 

    #info1-chapter3 { 
    padding-top: 110px; } 

    #chapter-four-background-right { 
    width: 250px; } 

    @keyframes swim { 
    0% { 
     -webkit-transform: translateX(0px); 
     -moz-transform: translateX(0px); 
     -ms-transform: translateX(0px); 
     -o-transform: translateX(0px); 
     transform: translateX(0px); } 

    50% { 
     -webkit-transform: translateX(500px); 
     -moz-transform: translateX(500px); 
     -ms-transform: translateX(500px); 
     -o-transform: translateX(500px); 
     transform: translateX(500px); } 

    100% { 
     -webkit-transform: translateX(1000px); 
     -moz-transform: translateX(1000px); 
     -ms-transform: translateX(1000px); 
     -o-transform: translateX(1000px); 
     transform: translateX(1000px); } } } 

Answer 1

你應該把具有@media查詢內的實際animation屬性的類，並保持外

幹過這樣的你仍然控制與媒體查詢的實際動畫@keframes規則，它會通過沒有錯誤

@media (max-width: 1325px) { 
    .class-that-animate { 
    animation: swim 2s; 
    } 
} 

@keyframes swim { 
    0% { 
     -webkit-transform: translateX(0px); 
     -moz-transform: translateX(0px); 
     -ms-transform: translateX(0px); 
     -o-transform: translateX(0px); 
     transform: translateX(0px); 
    } 
    50% { 
     -webkit-transform: translateX(500px); 
     -moz-transform: translateX(500px); 
     -ms-transform: translateX(500px); 
     -o-transform: translateX(500px); 
     transform: translateX(500px); 
    } 
    100% { 
     -webkit-transform: translateX(1000px); 
     -moz-transform: translateX(1000px); 
     -ms-transform: translateX(1000px); 
     -o-transform: translateX(1000px); 
     transform: translateX(1000px); 
    } 
} 

---

驗證有關不同的不同translateX值耳鼻喉科設備的大小，可以使2個規則和2個關鍵幀（這裏沒有前綴值，以方便閱讀）

@media (max-width: 1325px) { 
    .class-that-animate { 
    animation: swim 2s; 
    } 
} 

@media (max-width: 800px) { 
    .class-that-animate { 
    animation: swim-mobile 2s; 
    } 
} 

@keyframes swim { 
    0% { 
     transform: translateX(0px); 
    } 
    50% { 
     transform: translateX(500px); 
    } 
    100% { 
     transform: translateX(1000px); 
    } 
} 

@keyframes swim-mobile { 
    0% { 
     transform: translateX(0px); 
    } 
    50% { 
     transform: translateX(250px); 
    } 
    100% { 
     transform: translateX(500px); 
    } 
}