Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts

    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.


    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 HDRebel88; 02-15-2013 at 10:29 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,476
    Thanks
    6
    Thanked 980 Times in 953 Posts
    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.

  • #3
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    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.
    Last edited by HDRebel88; 02-15-2013 at 10:33 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •