我用css制作了一個動畫，讓div看起來像是& quot浮動& quot或者& quot懸停& quot，慢慢移動。但是它看起來一點也不自然，在彎角處變慢了。哪些細節可能會讓它看起來更流暢？

小片

@keyframes floating {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(10px, 0);
  }

  50% {
    transform: translate(10px, 10px);
  }

  75% {
    transform: translate(0, 10px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.floating-div {
  animation: floating 8s infinite;
}

<div class="floating-div" style="width:100px; height: 100px; border: 2px solid #000000; border-radius: 10px;">
    Bzbz
  </div>

您可以使用線性值的動畫計時功能，這樣動畫就不會在拐角處變慢，并保持一致。下面是更新后的代碼。試試這個

@keyframes floating {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(10px, 0);
  }

  50% {
    transform: translate(10px, 10px);
  }

  75% {
    transform: translate(0, 10px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.floating-div {
  animation: floating 8s infinite linear;
}

<div class="floating-div" style="width:100px; height: 100px; border: 2px solid #000000; border-radius: 10px;">
    Bzbz
  </div>

有梯度的小改進；) 通過使用動畫計時功能，你可以提高動畫的流暢度 我建議去https://animista.net/play/background/bg-pan/bg-pan-right,看看，那里有很多現成的動畫

@keyframes floating {
            0% {
                transform: translate(0, 0);
                background-position:0% 50%;
            }
            
            25% {
                transform: translate(50px, 0);
                background-position:100% 50%
            }
            
            50% {
                transform: translate(50px, 50px);
                background-position:0% 50%
            }

            
            75% {
                transform: translate(0, 50px);
                background-position:100% 50%
            }
            
            100% {
                transform: translate(0, 0);
                background-position:0% 50%
            }
        }
        
        .floating-div {
            animation: floating 8s infinite;
            animation-timing-function: linear;

            background: linear-gradient(270deg, #f7f200, #021df7);
            background-size: 400% 400%;
        }

<div class="floating-div" style="width:100px; height: 100px; border: 2px solid #000000; border-radius: 10px;">
  Bzbz
</div>

要使div浮動或懸停的動畫更平滑，可以調整CSS動畫中的關鍵幀。目前，動畫以固定的步幅移動div，導致它在拐角處變慢。下面是CSS動畫的更新版本，應該可以提供更平滑的浮動效果:

@keyframes floating {
0% {
transform: translate(0, 0);
}

25% {
transform: translate(5px, -5px);
}

50% {
transform: translate(10px, 0);
}

75% {
transform: translate(5px, 5px);
}

100% {
transform: translate(0, 0);
}
}

.floating-div {
animation: floating 8s infinite;
}

In this updated version, the div moves in smaller steps and introduces a   diagonal movement. This change helps create a smoother floating effect. Feel free to adjust the values as needed to achieve the desired effect.

此外，您可以嘗試使用animation-timing-function屬性來更改動畫的緩動。默認值為“減緩”，這可能會導致動畫在開始和結束時變慢。您可以嘗試使用不同的值，如“線性”、“漸強”、“漸弱”或“漸弱-漸弱”，以查看哪一個值可以產生所需的平滑度。例如:

.floating-div {
  animation: floating 8s infinite ease-in-out;
}

通過這些調整，您應該能夠為您的div實現更平滑、更自然的浮動或懸停效果。