Transition seulement de la frontière sur le vol stationnaire, mais pas pour le fond

Ici, j'ai un peu de CSS:

    #image-edges-beneath:hover{
    background-color: blue;
    }

    #image-edges:hover{
      background-color: blue;
    }

    #image-edges-beneat:hover:after{
    -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
      border: 2px solid #F1FD6D;
    }

    #image-edges:hover:after{
    -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
      border: 2px solid #F1FD6D;
    }

Toutefois, cela ne fonctionne pas. La seule chose qui se passe est que la couleur d'arrière-plan a une transition, tandis que je le veux pour changer seulement sur le vol stationnaire, tandis que la frontière, je veux avoir une transition, donc, fondamentalement, la frontière s'estompe en couleur alors que le changement de couleur de fond la couleur immédiatement après le vol stationnaire. C'est ce que je veux accomplir, mais cela ne fonctionne pas. 🙁
Toutes les idées utilisateurs?

OriginalL'auteur MFCS | 2013-01-18

  1. 44

    Ce que vous devez faire est de définir la propriété que vous voulez de transistion correctement. Actuellement, vous avez comme "tous", mais il doit être soit "couleur de fond" ou "border-color" sur la base duquel vous souhaitez être transféré.

     transition: border-color 1s ease;

    http://jsfiddle.net/u3Ahk/

    N'oubliez pas les préfixes de la croix-prise en charge du navigateur! -webkit-transition:border-color 1s ease; -moz-transition:border-color 1s ease; -o-transition:border-color 1s ease; transition:border-color 1s ease;

    OriginalL'auteur Kyle

  2. 4

    Vous pouvez faire de l'effet frontière dans un beaucoup de façon. Appliquer le css ci-dessous à la classe qui vous va appliquer l'effet frontière et de changer le style de bordure sur tout événement se produit.

     -webkit-transition:  border 3s ease;
 -moz-transition:  border 3s ease;
 -o-transition:  border 3s ease;
 -ms-transition: border 3s ease;
 transition: border 3s ease;

    Également consulter ces liens pour l'avance les effets de la frontière

    https://codepen.io/giana/pen/yYBpVY

    http://cssdeck.com/labs/10-crazy-effects-with-css3-border-transitions

    OriginalL'auteur loyola