Grow your CSS skills. Land your dream job.

how to handle css effect ..non support browser using jquery;

  • # March 13, 2013 at 7:07 pm

    Blink effect of text not supported in safari, so i want to handle through js how.i can handle through jquery..

    how i can handle this using if else statment.i am using following css code.

    @-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0; color:#E01B3C;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
    }
    @-moz-keyframes pulsate {
    0% {-moz-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0; color:#E01B3C;}
    100% {-moz-transform: scale(1.2, 1.2); opacity: 0.0;}
    }
    @keyframes pulsate {
    0% {transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0; color:#E01B3C;}
    100% {transform: scale(1.2, 1.2); opacity: 0.0;}
    }
    @-o-keyframes pulsate {
    0% {-moz-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0; color:#E01B3C;}
    100% {-moz-transform: scale(1.2, 1.2); opacity: 0.0;}
    }

    @keyframes pulsate {
    0% {
    transform: scale(0.1, 0.1);
    opacity: 0.0;
    } 50% {
    opacity: 1.0;
    color: #E01B3C;
    } 100% {
    transform: scale(1.2, 1.2);
    opacity: 0.0;
    }
    }
    #blink {
    width: 100%;
    color: #333;
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
    filter: alpha(opacity=0);
    opacity: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    font: normal normal 8em “impact”;
    -webkit-animation: pulsate 1.4s ease-out;
    -moz-animation: pulsate 1.4s ease-out;
    -o-animation: pulsate 1.4s ease-out;
    animation: pulsate 1.4s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -moz-transition: all 1.4s ease-in;
    -o-transition: all 1.4s ease-in;
    -webkit-transition: all 1.4s ease-in;
    transition: all 1.4s ease-in
    }

    #blink:hover {
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".