动画不起作用 CSS答案

【问题标题】：Animation does not work CSS动画不起作用 CSS
【发布时间】：2018-02-12 16:04:31
【问题描述】：

我正在尝试为我的 CSS 类添加一些动画代码如下：

#primary_nav_wrap li a:hover:after {
  height: 4px;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  background-color: #23a298;
  bottom: 0;
  content: "";
  left: 0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  position: absolute;
  top: 96px;
  width: calc(100% - 15px);

  -webkit-transition: color 0.4s ease-out;
  -moz-transition: color 0.4s ease-out;
  -o-transition: color 0.4s ease-out;
  -ms-transition: color 0.4s ease-out;
  transition: color 0.4s ease-out;
}

一切都很好，但这部分不起作用：

-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;

【问题讨论】：

我需要详细说明您的代码。 css, html
添加您的 HTML 代码，以便您获得帮助。据我所知，您必须向父元素提供过渡并在子元素中提供要更改的属性。
jsfiddle.net/y7mkaq3b

标签： css css-transitions pseudo-element webkit-transform

【解决方案1】：

将此代码添加到您的a:after

#primary_nav_wrap li a:after {
  height: 4px;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  bottom: 0;
  content: "";
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 96px;
  width: calc(100% - 15px);
  -webkit-transition: background-color 0.4s ease-out;
  -moz-transition: background-color 0.4s ease-out;
  -o-transition: background-color 0.4s ease-out;
  -ms-transition: background-color 0.4s ease-out;
  transition: background-color 0.4s ease-out;
}

你没有把过渡效果放在悬停上，你也没有提到哪种风格应该得到过渡，所以我把它给了background-color

例子：

https://jsfiddle.net/7o2mw6ng/

【讨论】：

【解决方案2】：

尝试将过渡放置在元素上不应用悬停：

#primary_nav_wrap li a:after {
    -webkit-transition: color 0.4s ease-out;
    -moz-transition: color 0.4s ease-out;
    -o-transition: color 0.4s ease-out;
    -ms-transition: color 0.4s ease-out;
    transition: color 0.4s ease-out;
}

编辑：您正在更改 a 标记上的颜色，因此您需要在此处应用过渡。

#primary_nav_wrap ul a {
    -webkit-transition: color 0.4s ease-out;
    -moz-transition: color 0.4s ease-out;
    -o-transition: color 0.4s ease-out;
    -ms-transition: color 0.4s ease-out;
    transition: color 0.4s ease-out;
}

See jsfiddle here.

【讨论】：

还是同样的问题
嗯。很难说问题出在哪里，因为我们这里只有一部分代码。如果您创建一个 jsfiddle 来显示问题，我相信我们可以提供帮助。例如，您的代码没有显示color 的应用位置？
@Nedvid 已根据您那里的具体问题更新了工作答案。