#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    199
    Rep Power
    29

    SOLVED: JQuery + CSS Animation/Transition


    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.

    So to be clear, it's fully working FireFox, Safari, and Chrome, half working (flashing animation isn't work properly) in Opera, and not working at all in IE.

    Here's my CSS relevant:
    Code:
    .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;}
    }
    Last edited by HDFilmMaker2112; February 15th, 2013 at 05:32 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    199
    Rep Power
    29
    Nevermind. I just used Conditional CSS (to detect Opera and IE 1-9) and a flashing background-image, and implemented it that way.

IMN logo majestic logo threadwatch logo seochat tools logo