Question

我相信可以在CSS中为CSS元素添加css，即使它当前是一个工作草案。

但是，在尝试使用最新版本的Chrome时，我似乎无法正常使用它。

我希望我的标题上的：after元素转换而不是看起来那么块。

我已将过渡添加到my after元素但它仍然相同，我是否指定了CSS，如下所示;

#main-header:after {
height: 95px;
content: " ";
width: 100%;
left: 0;
position: absolute;
background: url(http://stbenedicts.justinternetdns.co.uk/wp-content/uploads/2016/07/waves-test-1.png) top center;
z-index: 1;
top: 144px;
}

#main-header.et-fixed-header:after {
    -webkit-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
    -moz-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
    transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
   top: 54px;
}

因此，当滚动时，after元素应该缓和而不是一个固定的运动。

有什么建议吗？

编辑：http://stbenedicts.justinternetdns.co.uk/＆lt; - playground

Answer 1

尝试在基类（transition）上设置-webkit-transition属性（-moz-transition，transition，#main-header:after）。

#main-header:after {
    height: 95px;
    content: " ";
    width: 100%;
    left: 0;
    position: absolute;
    background: url(http://stbenedicts.justinternetdns.co.uk/wp-content/uploads/2016/07/waves-test-1.png) top center;
    z-index: 1;
    top: 144px;
    -webkit-transition: all 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
    -moz-transition: all 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
    transition: all 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
}

#main-header.et-fixed-header:after {
   top: 54px;
}

通过定义基类的转换，浏览器知道转换，当修改条件 - 可能是你的例子中的et-fixed-header的加法 - 出现时。否则，只有在该条件存在时才将transition属性应用于类;这意味着只有/当删除该修饰符时才会看到转换。 This article可以更好地解释它。

编辑：我没有注意到您只为background-color属性指定了transition。除了将transition属性移动到基类之外，您还必须添加其他属性（语法解释为here，或广泛过渡all属性

Answer 2

我正在假设在添加.et-fixed-header时应该进行转换。

但是你在转变什么？

transition: 
background-color 0.4s, 
color 0.4s, 
transform 0.4s, 
opacity 0.4s ease-in-out;

但从到是什么？

您没有为这些属性或结束值设置初始值。

您唯一要更改的内容（背景除外）有top值，而您根本没有过渡。

因此，您需要在#main-header规则上设置实际值，并在#main-header.et-fixed-header规则上设置新的不同值

after元素后面的CSS动画似乎没有做任何事情？

2 个答案: