fadeout au passage du curseur à l'aide d'images clés?

Question

J'utilise une animation d'images clés et j'utilise des marqueurs qui, lorsque vous les survolez, contiennent des informations ou une image. J'ai ajouté un fondu, mais je ne sais pas comment le faire disparaître.
J'ai la keyframes partie:

@keyframes fadeout { 
0% { 
    opacity: 1;} 
100% {opacity: 0;} 
} 
.fadeout { 
-webkit-animation-name: fadeout; 
animation-name: fadeout; 
} 

Et c'est la partie de l'animation que je veux insérer (?):

animation-duration: 0.5s; 
animation-name: fadeout; 

Je suppose que mon problème est que je ne sais pas comment insérer il.

C'est le codepen J'utilise:

http://codepen.io/aslenwhitmore/pen/rxLYgQ?editors=0100

si quelqu'un peut me dire où je devrais insérer le fadeout? merci!

Answer 1

Vous pouvez obtenir l'effet désiré en utilisant la propriété transition qui déclenche un état d'opacité en survol. Il n'y a pas besoin de javascript car CSS vous permet de manipuler les enfants de sélecteur sur hover ou d'autres états.

See my codepen fork for a working example

Depuis CSS ne peut pas passer la propriété display, nous allons simplement utiliser l'opacité et z-index.

Le z-index se cacheront les éléments sous le document (z-index:-1) et les amener à 999 fois activé

Hover code

&:hover .map-marker-info { 
    opacity:1; 
    z-index:999; 
} 

code statique

&-marker-info { 
    display: block; 
    transition:0.3s; 
    opacity: 0; 
    z-index: -1; 
} 

PS Je recommande d'augmenter le rayon de e hover zone pour rendre les points plus faciles à utiliser

Answer 2

Changez simplement votre animation en une transition.

Définissez l'opacité de votre pop-up d'informations sur 0. Définissez ensuite son opacité :hover sur 1. Maintenant, changez le bit animation: fade-in 1s en transition: opacity 1s.