为什么元素在没有悬停的情况下会褪色和动画？（负载）答案

【问题标题】：Why elements are fading and animating without hover? (on load)为什么元素在没有悬停的情况下会褪色和动画？（负载）
【发布时间】：2021-08-12 00:34:55
【问题描述】：

当我第一次加载页面时，div 褪色和边框半径动画 0 到 50px 没有任何理由！只有当我在外部添加 css 时才会发生这种情况，请帮助我。我需要尽快完成一个项目？？？？

现场演示 http://toastbyayan.rf.gd/（使用隐身模式并关闭缓存，因为你们知道infinityfree）

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="wtfooooook.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="yol"></div>
</body>
</html>

CSS

.yol {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: red;
  transition: 2s;
}

.yol:hover {
  width: 300px;
  border-radius: 0;
}

P.S. 我也尝试在不同的浏览器中使用 localhost，当我尝试加载或重新加载页面时，每次都会遇到这个问题。（我用的是serve）

【问题讨论】：

CSS 过渡在页面加载时发生，强制仅在页面加载后加载过渡，应该修复它，试试这个。 css-tricks.com/transitions-only-after-page-load
仍在制作动画

标签： html css animation hover translation

【解决方案1】：

因为您需要说出您想要制作动画的过渡。这里是 CSS 代码：

.yol {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: red;
  transition-property: width, border-radius;
  transition-duration: 0.5s;
}

.yol:hover {
  width: 300px;
  border-radius: 0;
}

【讨论】：