你可以使用animation timing function和linear值，这样动画在角上就不会变慢，并且保持一致。下面是更新后的代码。试试这个：-

@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>

通过每个循环的持续时间的动画进度也可以使用三次贝塞尔函数来调整。对于线性进度，三次贝塞尔函数的值将为0.0，0.0，1.0，1.0。下面是示例代码：-

@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 cubic-bezier(0.0, 0.0, 1.0, 1.0);
}

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

有梯度的小改进;）通过使用animation-timing-function，可以增强动画的流畅度我建议查看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实现更平滑，更自然的浮动或悬停效果。