Effet d'effacement d'opacité hover CSS3?

Question

Y a-t-il un moyen plus simple et plus simple d'écrire l'opacité de l'effet de facilité d'entrée ci-dessous?

CSS:

.button-hover { 
    font-family: arial black; 
    font-size: 100px; 
    color: #000; 

    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
    opacity: 1; 
} 

.button-hover:hover { 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
    opacity: 0.5; 
} 

Comme vous pouvez voir que je le répète, ces lignes deux fois qui ne semble pas idéal:

-webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 

HTML:

<div class="container"> 
    <a href="#" class="button-hover">HOVER ME</a> 
</div> 

jsfiddle

Answer 1

Ne répétez pas les règles de transition.CSS pre-processors peut aider avec le préfixe du fournisseur, mais vous n'avez pas vraiment besoin de (et ne devez pas) répéter les déclarations de transition dans le :hover. Il suffit de les mettre une fois dans l'état par défaut des éléments comme ceci:

.button-hover { 
 
    font-family: arial black; 
 
    font-size: 100px; 
 
    color: #000; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -ms-transition: opacity 1s ease-in-out; 
 
    -o-transition: opacity 1s ease-in-out; 
 
    transition: opacity 1s ease-in-out; 
 
    opacity: 1; 
 
} 
 

 
.button-hover:hover { 
 
    opacity: 0.5; 
 
}

<div class="container"> 
 
    <a href="#" class="button-hover">HOVER ME</a> 
 
</div>

Understanding CSS3 Transitions

Answer 2

Ce sont les préfixes nécessaires au support du navigateur. Vous pouvez voir here quelles versions de navigateurs ont besoin d'un préfixe et décider si vous pouvez les supprimer en fonction des navigateurs que vous voulez prendre en charge.

Par exemple le préfixe -moz- est pour Firefox et vous pouvez voir que depuis Firefox 16 il n'est plus nécessaire, donc vous pouvez utiliser transition sans -moz- pour Firefox 16+.

En savoir plus sur les préfixes here.

Answer 3

SASS & LESS peut faire ce facile pour vous. Vous pouvez utiliser SASS & MOINS Mixins pour cela.

Exemple (SASS):

/* Create a Mixin (SASS) */ 
@mixin transition($property, $time, $method) { 
    -webkit-transition: $property $time $method; 
    -moz-transition: $property $time $method; 
    -ms-transition: $property $time $method; 
    -o-transition: $property $time $method; 
    transition: $property $time $method; 
} 

/* Include this Mixin (SASS) */ 
.button-hover:hover { 
    @include transition(opacity, 1s, ease-in-out); 
} 

Exemple (MOINS):

/* Create a Mixin (LESS) */ 
.transition(@property, @time, @method) { 
    -webkit-transition: @arguments; 
    -moz-transition: @arguments; 
    -ms-transition: @arguments; 
    -o-transition: @arguments; 
    transition: @arguments; 
} 

/* Include this Mixin (LESS) */ 
.button-hover:hover { 
    .transition(opacity, 1s, ease-in-out); 
} 

Cela va convertir en CSS:

.button-hover:hover { 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

En savoir plus sur SASS, LESS