無法使用 CSS Animation 為元素的寬度設置動畫

Question

我在 CSS 中使用動畫，但它不起作用。 如果我檢查檢查菜單，即使語法正常，它也會顯示無效語法。 我還有其他兩個動畫，但它們工作正常。 只有我嘗試調整寬度的特定動畫不起作用。

這是我的 HTML 代碼：-

<!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">
    <title>Hanuman - The Warrior</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="bg-div bg-ani-class"></div>
    <div class="sea-div sea-ani-class"></div>
    <div class="hanuman-div">
        <img src="imgs/hanuman.png" alt="">
        <img src="imgs/gada.png" alt="" id="gada">
        <img src="imgs/laserbeam.png" alt="" class="laser">
    </div>
    <div class="mountain-div">
        <img src="imgs/mountain.png" alt="">
    </div>
    <div class="dragon-1-div"></div>
    <div class="dragon-2-div"></div>
</body>
<script src="main.js"></script>

</html>

我的 CSS 代碼：-

*{
    margin: 0;
    padding: 0;
}

body{
    overflow: hidden;
}

.bg-div {
    background: url(imgs/sky.png);
    height: 100vh;
    background-size: 79% 792px;
    background-position-y: -332px;
    width: 900vw;
}

.sea-div{
    background: url(imgs/sea.jpg);
    height: 37vh;
    position: absolute;
    bottom: 0;
    width: 900vw;
    background-size: 10% 403px;
}

.bg-ani-class {
    animation: seaMove linear infinite 3s;
    background-repeat: repeat-x;
}

.sea-ani-class{
    animation: seaMove linear infinite 6s;
    background-repeat: repeat-x;
}

.obst-ani-class{
    animation: obstMove linear 5s;
}

.mountain-div {
    position: absolute;
    top: 10vh;
    /* width: 18vh; */
    /* height: 20vh; */
    left: 108vw;
}

.mountain-div img{
    width: 148vh;
}

.hanuman-div{
    position: absolute;
    top: 28vh;
    left: 3vw;
}

.hanuman-div img {
    width: 20vw;
}

#gada{
    position: absolute;
    left: 0;
    /* top: 56px; */
    transition: 0.1s ease all;
}

.gada-rot{
    left: 8vw !important;
    transform: rotate(180deg);
    top: -22px !important;
}

.laser {
    position: absolute;
    transform: rotateZ(189deg);
    /* top: -14vh; */
    left: 282px;
    /* width: 45vw !important; */
    width: 0% !important;
    /* transition: 0.4s ease-out; */
    animation: laserAnimation infinite 3s;
}



.dragon-1-div{

}

.dragon-2-div{

}

/* Animations */

/* These 2 Animations are working */
@keyframes seaMove{
    100%{
        transform: translateX(-500vw);
    }
}

@keyframes obstMove{
    0%{
        left: 108vw;
    }
    100%{
        left: -100vw;
    }
}


/* This animation isn't working */

@keyframes laserAnimation{
    from{
        width: 0 !important;
    }
    to{
        width: 45vw !important;
    }
}

Answer 1

動畫寬度和高度通常不是一個好主意。 總是嘗試使用復合動畫，例如不透明度、變換。 要實現寬度動畫，請使用縮放變換。 這是一個激光表演給你：

 body { overflow: hidden; } .laser { position: absolute; left: 0; top: 50%; height: 10px; width: 100%; background: #d7272b; animation: laserAnimation 2s ease-out infinite; } .greenLaser { position: absolute; left: 0; top: 0; height: 10px; width: 100%; background: #0063d5; animation: laserAnimation 2s ease-out infinite; } .blueLaser { position: absolute; bottom: 0; left: 0; height: 10px; width: 100%; background: #00d53b; animation: laserAnimation 2s ease-out infinite; } @keyframes laserAnimation { from { transform: scaleX(0); } to { transform: scaleX(1); } }

 <div class="laser"> </div> <div class="greenLaser"> </div> <div class="blueLaser"> </div>

無法使用 CSS Animation 為元素的寬度設置動畫

問題描述

1 個解決方案

解決方案1
0 2021-07-30 12:53:44

無法使用 CSS Animation 為元素的寬度設置動畫

問題描述

1 個解決方案

解決方案1 0 2021-07-30 12:53:44

解決方案1
0 2021-07-30 12:53:44