CSS3过渡流程问题

Question

I have setup a background transition on this page .

The first area of the page "Il Blog - Leggi tutti gli articoli" and "Gli Eventi - Leggi tutti gli eventi" shows a list of different post types in tiles. When hovering on one of them, the transition start. When moving out the mouse, the other transition start. Until there everything's fine.

The problem shows when I move the mouse out of a tile BEFORE the transition is completed.

I am trying to figure out what's missing in my CSS but I can't find it.

I know I could probably solve the problem moving the transition to a jQuery script, but I prefer using a CSS only approach.

Here is an SCSS excerpt of the involved elements:

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');

    }
}

Here's the produced CSS, just in case someone prefers to see it this way:

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

the second transition you include in the hover is useless. The ease-in-out makes it come fade in and fade out.

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