CSS3 hover opacity ease-in-out effect? - css

Question

Is there any better and simpler way writing opacity ease-in-out effect below?
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;
}
As you can see that I repeat these lines twice which does not seem ideal:
-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">
HOVER ME
</div>
jsfiddle

Answer 1

Don't repeat the transition rules. CSS pre-processors can help with the vendor prefixing but you really don't need to (and shouldn't) repeat the transition declarations in the :hover. Just set them once in elements's default state like so:
.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">
HOVER ME
</div>
Understanding CSS3 Transitions

Answer 2

SASS & LESS can make this easy for you. You can use SASS & LESS Mixins for this.
Example (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);
}
Example (LESS):
/* 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);
}
This will convert into 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;
}
More about SASS, LESS

Answer 3

Those are prefixes needed for browser support.
You can see here which browsers versions needs a prefix and decide if you can delete them based on what browsers you want to support.
For example the -moz- prefix is for Firefox and you can see that from Firefox 16 it is not needed anymore, so you can use transition without -moz- for Firefox 16+.
Read more about prefixes here.