元素后面的CSS动画看起来没有做任何事情？

Question

我相信可以将CSS添加到CSS中的伪元素，即使它是当前的工作草案。

但是，在尝试使用最新版本的Chrome后，我似乎无法使其工作。

我想要：我的标题后元素转换，而不是看起来如此块状。

我已经添加了过渡到我的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; 
} 

因此，当滚动时，后面的元素应该放松，而不是一个固体运动。

有什么建议吗？

编辑：http://stbenedicts.justinternetdns.co.uk/ < - 操场

Answer 1

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

#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

我正在研究过渡（s ）都应该发生当添加.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规则