Html 如何防止过渡动画运行页面加载_Html_Css_Background_Css Transitions

Html 如何防止过渡动画运行页面加载

html css

Html 如何防止过渡动画运行页面加载,html,css,background,css-transitions,Html,Css,Background,Css Transitions,我有以下HTML代码：这个CSS：正文{ 背景色：#F3；字体：12px/1.4“Lucida Grande”、“Lucida Sans Unicode”、“Lucida Sans”、Garuda、Verdana、Tahoma、Sans serif；保证金：0； } .主集装箱{ 背景色：白色；宽度：1050px；保证金：0自动；高度：900px； } .main_头{ 高度：400px；边框顶部：8px灰色实体；背景：url（../img/header_bg.jpg）不重

我有以下HTML代码：

这个CSS：

正文{
背景色：#F3；
字体：12px/1.4“Lucida Grande”、“Lucida Sans Unicode”、“Lucida Sans”、Garuda、Verdana、Tahoma、Sans serif；
保证金：0；
}
.主集装箱{
背景色：白色；
宽度：1050px；
保证金：0自动；
高度：900px；
}
.main_头{
高度：400px；
边框顶部：8px灰色实体；
背景：url（../img/header_bg.jpg）不重复；
背景尺寸：1050px；
}
.主页搜索{
字体系列：“州际”、“Lucida Grande”、“Lucida Sans Unicode”、“Lucida Sans”、Garuda、Verdana、Tahoma、Sans serif；
利润上限：200px；
宽度：60%；
颜色：#666；
大纲：0；
边界：0；
填充物：5px7px；
背景：#e5；
高度：40px；
边界半径：4px；
-webkit过渡：背景0.4s-0秒；
-moz转换：背景0.4s到0.0s；
-o-过渡：背景0.0s；
过渡：背景0.0秒；
}
.主页搜索：焦点{
背景色：白色；
}

我的问题是，当我刷新页面时，搜索输入的背景变为白色，然后变为灰色，这意味着在我没有单击输入时正在发生转换。如何防止这种情况发生？

刚刚在body元素中添加了一类“preload”

<body class="preload">

然后在页面加载时删除该类：

JQuery

$(window).load(function() {
  $("body").removeClass("preload");
});

所以你想让

.main\u page\u search

只有在你点击它的时候才有一个白色的背景吗？它工作得很好，你确定有问题吗？我猜你是用javascript或其他东西添加了类，所以发生了转换。我说的对吗？我很惊讶它在JSFIDDLE上运行得很好，是的，我只想让转换在点击时工作，而不是在页面加载时工作

$(window).load(function() {
  $("body").removeClass("preload");
});