Проблема с потоком перехода CSS3

Question

У меня есть настройка фона на this page.

Первая область страницы «Il Блог - Leggi тутти циклооксигеназы ARTICOLI» и «Gli Eventi - Leggi тутти циклооксигеназы просмотр_событий» показывает список различных типов почтовых черепицей. При наведении указателя на один из них начинается переход. При перемещении мыши начинается другой переход. Пока там все в порядке.

Проблема показывает, когда я вытаскиваю мышь из плитки ДО ПЕРЕДАЧИ перехода.

Я пытаюсь выяснить, чего не хватает в моем 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 
    } 
}