treehouse : what would you like to learn today?
Web Design Web Development iOS Development

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

  • 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
      }