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

Question

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

然而，在尝试最新版本的Chrome时，我似乎无法让它正常工作。

我希望我的页眉上的：after元素过渡到中，而不是看起来那么块状。

我已经将转换添加到我的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/<-操场

Answer 1

我假设在添加.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规则上设置新的不同的值

Answer 2

尝试在基类（#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属性应用于类；这意味着只有当移除该修饰符时，您才能看到转换。这篇文章在解释它方面做得更好

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