Resolved jQuery + CSS Animation/Transition

[HDRebel88]

I really have no idea where to start with this, but I need to provide a back-up solution for IE9 and lower and Opera for some CSS Animations and Transitions.

http://www.ghostencounters.net/index.php

Opera is handling Transitions fine, but not properly handling my Animation.

In Opera when you mouseover the flashing "Live" tab, it ends the animations (as it should), but when you mouseout from the tab it doesn't restart the animation, like it does in Firefox, Safari, and Chrome (which is what I want, it to restart the animation on mouseout).


Now in Internet Explorer, nothing works... I need something to make the transitions work on mouseover and the animation to work.


Here's my CSS relevant:

.tabs{
height: 28px;
float: right;
}
.tab{
height: 28px;
line-height: 28px;
background-color: #8C0030;
-moz-box-shadow: 5px 5px 5px #BBAAAA;
-webkit-box-shadow: 5px 5px 5px #BBAAAA;
box-shadow: 5px 5px 5px #BBAAAA;
float: left;
padding: 0px 8px;
margin: 0px 5px;
text-align: center;
font-size: 15px;
color: #FFFFFF;
position: relative;
bottom: 0px;
transition: all 0.25s;
-moz-transition: all 0.25s; /* Firefox 4 */
-webkit-transition: all 0.25s; /* Safari and Chrome */
-o-transition: all 0.25s; /* Opera */
border-width: 1px;
border-color: #000000;
border-style: solid;
border-collapse: collapse;
}
.tab:hover{
height: 35px;
position: relative;
bottom: 7px;
background-color: #000000;
-moz-box-shadow: 5px 5px 5px #AAAAAA;
-webkit-box-shadow: 5px 5px 5px #AAAAAA;
box-shadow: 5px 5px 5px #AAAAAA;
transition-timing-function: linear;
-moz-transition-timing-function: linear;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
}
.tab_link{
height: 28px;
width: 100%;
color: #FFFFFF;
text-decoration: none;
display: block;
}
.tab_link:hover{
height: 35px;
width: 100%;
color: #FFFFFF;
text-decoration: none;
display: block;
}
#live
{
height: 28px;
line-height: 28px;
background-color: #8C0030;
position:relative;
animation-name: liveFlash;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: liveFlash;
-moz-animation-duration: 1.5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: liveFlash;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: liveFlash;
-o-animation-duration: 1.5s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
#live:hover{
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
height: 35px;
position: relative;
bottom: 7px;
background-color: #000000;
}
@keyframes liveFlash
{
0%   {background:#8C0030;}
100% {background:#000000;}
}
@-moz-keyframes liveFlash /* Firefox */
{
0%   {background:#8C0030;}
100% {background:#000000;}
}
@-webkit-keyframes liveFlash /* Safari and Chrome */
{
0%   {background:#8C0030;}
100% {background:#000000;}
}
@-o-keyframes liveFlash /* Opera */
{
0%   {background:#8C0030;}
100% {background:#000000;}
}

[VIPStephan]

Besides the fact that I don’t see any flashing live tab and your source code is never mentioning jQuery anywhere (so I don’t know what your thread title is trying to tell us), first let me tell you: your approach is wrong. It’s the internet, baby, and you have to get used to the fact that websites can and will look and work differently for everyone, i. e. your primary goal should be to make a website work appropriately, not to get all cutting-edge features working in browsers that don’t support them by nature. Then let me tell you another thing: You are using experimental CSS features that are not standardized (yet) and may or may not change in future. If I were you I wouldn’t rely on these features anyway and mentally prepare for the fact that it could not work in one or the other browser. So, the simplest back-up solution for IE 9 and lower and Opera is to just ignore the animations since they are not relevant for the functioning of the site.

If you’re that desperate to have these purely decorational animations in all major browsers then by all means use jQuery if you like. You haven’t asked a specific question in that respect, though, so I don’t know what else to tell you.

[HDRebel88]

Nevermind. I just used Conditional CSS (to detect Opera and IE 1-9) and a flashing background-image, and implemented it that way. The live tab only flashes when triggered via a php switch, that I manually set... I had turned it off by the time you saw the page.