Is there a way to group browser-specific css3 animations? - html

Question

I want to make a CSS3 animation where a div gets a box shadow on mouse over, and loses it on mouse out. This is what I have so far:
HTML:
<div id="page">
<div id="container" onmouseover="mouseOverContainer()" onmouseout="mouseOutContainer()" class="">
</div>
</div>
JS:
var container = undefined;
function assignContainer() {
if(container===undefined) {
container = document.getElementById("container");
}
}
function mouseOverContainer() {
assignContainer();
container.className="container-in";
}
function mouseOutContainer() {
assignContainer();
container.className="container-out";
}
CSS:
#keyframes box-shadow-anim-in{
from {
box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
margin-top: 20px;
}
to {
box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
margin-top: 18px;
}
}
#-o-keyframes box-shadow-anim-in{
from {
-o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
}
to {
-o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
}
}
#-webkit-keyframes box-shadow-anim-in{
from {
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
}
to {
-webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
}
}
#-ms-keyframes box-shadow-anim-in{
from {
-ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
}
to {
-ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
}
}
#-moz-keyframes box-shadow-anim-in {
from {
-moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
}
to {
-moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
}
}
#keyframes box-shadow-anim-out{
from {
box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
}
to {
box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
}
}
#-moz-keyframes box-shadow-anim-out{
from {
-moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
}
to {
-moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
}
}
#-o-keyframes box-shadow-anim-out{
from {
-o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
}
to {
-o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
}
}
#-webkit-keyframes box-shadow-anim-out {
from {
-webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
}
to {
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
}
}
#-ms-keyframes box-shadow-anim-out{
from {
-ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
}
to {
-ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
}
}
#page {
width: 900px;
margin: 0 auto;
}
#container {
width: 60%;
height: 250px;
background-color: #ccc;
margin-top: 20px;
border: 1px solid #999;
}
.container-out {
animation: box-shadow-anim-out 0.3s;
-moz-animation: box-shadow-anim-out 0.3s;
-webkit-animation: box-shadow-anim-out 0.3s;
-o-animation: box-shadow-anim-out 0.3s;
-ms-animation: box-shadow-anim-out 0.3s;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.container-in {
animation: box-shadow-anim-in 0.3s;
-moz-animation: box-shadow-anim-in 0.3s;
-webkit-animation: box-shadow-anim-in 0.3s;
-o-animation: box-shadow-anim-in 0.3s;
-ms-animation: box-shadow-anim-in 0.3s;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
Everything works fine, as you can see in this JSFiddle.
But, as you can see, we have to define browser-specific keyframes in order to make it work on all browsers.
It's a bit boring, especially when you have to change one small detail in one animation, because you have to change all other browser-specific animations too.
I thought I could use just one block, inserting all keyframes separated by comma, like this:
#keyframes box-shadow-anim-in,
#-o-keyframes box-shadow-anim-in,
#-webkit-keyframes box-shadow-anim-in,
#-ms-keyframes box-shadow-anim-in,
#-moz-keyframes box-shadow-anim-in {
from {
box-shadow: 0 0 0 rgba(0,0,0,0.0);
-o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
-ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
-moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
}
to {
box-shadow: 0 0 250px rgba(127,127,127,1.0);
-o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
-webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
-ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
-moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
}
}
#keyframes box-shadow-anim-out,
#-o-keyframes box-shadow-anim-out,
#-webkit-keyframes box-shadow-anim-out,
#-ms-keyframes box-shadow-anim-out,
#-moz-keyframes box-shadow-anim-out {
from {
box-shadow: 0 0 250px rgba(127,127,127,1.0);
-o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
-webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
-ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
-moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
background-color: #efefef;
margin-top: 18px;
}
to {
box-shadow: 0 0 0 rgba(0,0,0,0.0);
-o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
-ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
-moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
background-color: #ccc;
margin-top: 20px;
}
}
But this doesn't seem to work (JSFiddle here), so maybe I'm doing something wrong or I just can't do it like this.
Is it possible to do something like this? If yes, how?

Answer 1

No, it's not possible with CSS. You can't group different at-rules together, much like how you can't group vendor-prefixed selectors.
You could resort to using a Sass/LESS mixin, but that's assuming you're working with a preprocessor already, and that just outputs separate duplicate CSS rules anyway.
For what it's worth, there are several prefixes that can be removed to reduce some of the bloat in your CSS:
#-ms-keyframes and -ms-animation are not used by any stable version of IE; IE10 supports them unprefixed right out of the box
Firefox also supports unprefixed #keyframes/animation, starting from version 16
-ms-box-shadow and -o-box-shadow have never existed, so they should be removed/unprefixed
-moz-box-shadow is only required by Firefox 3.5 and 3.6, neither of which support CSS animations (not even via #-moz-keyframes — that was added in version 5), so it should be unprefixed
You should also place the prefixless item last instead of first, to ensure (by the cascade) that it takes precedence over the prefixed item in browsers that support it.

Answer 2

This is not possible without a preprocessor such as SASS or LESS.
But, there is another option using JS. Take a look here: http://leaverou.github.io/prefixfree/
I would personally suggest you switch over to a CSS preprocessor, as it will undoubtedly be handy in the future.