CSS3过渡流问题

我已经在上设置了背景转换

页面的第一个区域“Il Blog-Leggi tutti gli articoli”和“gli Eventi-Leggi tutti gli Eventi”以平铺形式显示不同帖子类型的列表。 将鼠标悬停在其中一个按钮上时，转换将开始。 移出鼠标时，另一个过渡开始。 直到一切都好起来

当我在转换完成之前将鼠标移出平铺时，问题就出现了

我试图找出我的CSS中缺少什么，但我找不到它

我知道我可能可以解决将转换转移到jQuery脚本的问题，但我更喜欢只使用CSS的方法

以下是有关内容的SCSS摘录：

article {

    @include box-shadow(0 0 2px $primary-color);
    @include transition(all 1s ease-in-out);
    @include border-radius(2px);

    background-image: url('../images/concrete_wall.png');

    &:hover {
      @include box-shadow(0 0 4px $primary-color);
      background-image: url('../images/concrete_wall_2.png');

    }
}

以下是生成的CSS，以防有人喜欢这样看：

body.home #posts-area #posts-area-columns #home-posts-list article, body.home #posts-area #posts-area-columns #featured-events-list article {
  -webkit-box-shadow: 0 0 2px #222222;
  -moz-box-shadow: 0 0 2px #222222;
  box-shadow: 0 0 2px #222222;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  background-image: url("../images/concrete_wall.png");
}
/* line 60, ../sass/_home.scss */
body.home #posts-area #posts-area-columns #home-posts-list article:hover, body.home #posts-area #posts-area-columns #featured-events-list article:hover {
  -webkit-box-shadow: 0 0 4px #222222;
  -moz-box-shadow: 0 0 4px #222222;
  box-shadow: 0 0 4px #222222;
  background-image: url("../images/concrete_wall_2.png");
}

---

在悬停中包含的第二个过渡是无用的。轻松的进退让它变得淡入淡出

article {

    @include box-shadow(0 0 2px $primary-color);
    @include transition(all 1s ease-in-out); //Note i changed it to eas-in-out
    @include border-radius(2px);

    background-image: url('../images/concrete_wall.png');

    &:hover {
      @include box-shadow(0 0 4px $primary-color);
      background-image: url('../images/concrete_wall_2.png');
      //Note I removed the unnecessary transition
    }
}

---

第二个转变不是很重要吗？相反，请尝试以下操作：

@include transition（所有1都易于输入输出）

你可以添加一个提琴或者发布html吗？我不确定我怎么能只从这个部分创建一个提琴。至于HTML，它在我发布的URL中。你是对的：第二次转换没有用。但是，删除它并不能解决问题。我正在用生成的CSS更新我的问题。您没有添加eas in out吗@Andreasciamana您忘记了这一点：

@include transition（所有1都易于输入输出）而不是
@包含转换（所有1都很容易）实际上是我做的，正如您在实际的CSS中看到的（我忘记编辑SCSS代码）。