CSS3转换流问题

Question

我在this page上设置了背景转换。

的页面的第一区“伊尔博客 - 莱吉合奏GLI articoli”和“GLI节庆活动 - 莱吉合奏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"); 
} 

Answer 1

您在包括第二过渡悬停是无用的。轻松进入，使其淡入淡出。

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 
    } 
}