Question

嘿我是开发新手所以当我们改变菜单项时我试图改变背景颜色，我已经这样做了，但是想要改变背景颜色有一些延迟。我尝试过渡属性但没有结果。是转换属性不适用于<body>？我试图提供“{id}＆＃39;到<body>并应用此类规则

<body id="color">

CSS

#color {
    background-color: yellowgreen;
    transition: background-color 2s ;
}

我做错了什么？将<div>应用于整页并应用相同规则的方法是什么？

Answer 1

首先，在使用转场时，您需要为Safari添加-webkit - http://www.w3schools.com/cssref/css3_pr_transition.asp

如果您想要一个需要x个时间的转换效果，则可以排除以下transition-delay。但是如果你希望你的转换延迟2秒，那么你可以添加transition-delay并设置你想要延迟转换的秒数。

#color {
  background-color: yellowgreen;
  -webkit-transition: background-color 2s ease-in; /* Safari */
          transition: background-color 2s ease-in;
  -webkit-transition-delay: 2s; /* Safari */
          transition-delay: 2s;

以下是可用于转场的一些时序功能列表 - http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

以下是fiddle，向您展示border-color转换如何在悬停时开始.5秒。

Answer 2

如果此ID被覆盖前面的或默认规则，那么在加载CSS时这只会工作一次。你甚至可能都没有注意到它。

加载CSS后，它会保留在您的浏览器中，不再发生任何事情。

您可以尝试将CSS文件与时间戳链接，以便在每次重新加载页面时强制刷新CSS。有点像/myCssFile.css&id=010012014

实际上，好的做法是在onload事件上添加一个课程，并从那里设置transition或animation。

CSS并不是真正意义上的。

这是我前一段时间做过的测试：http://codepen.io/gcyrillus/pen/rmhAp您可能会在浏览器第一次加载动画时看到动画。

Answer 3

Mabye This Will Help

这会不断改变背景颜色。

如何使用css延迟背景颜色转换

3 个答案: