CODEWITHSUNDEEP
htmlcssgoogle-chromesafaricss-transitions
Jimq
Jimq

Reputation: 372

How to make Css transition effect work on Safari and Chrome?

I have an example http://codepen.io/carlosjgsousa/pen/xaewg and am facing a problem with getting the code to work on Chrome and Safari, it works fine in Firefox.

body {
    background: #292f33;
    text-align:center;
    color: #FFF;
    font-family: sans-serif;
}

.btntest {
    width: 190px;
    padding:4px;
    border-radius: 5px;
    background: red;
    color: white;
    z-index:299;
    position: fixed;
}

Thank you for solving this!

Upvotes: 1

Views: 311

Answers (2)

Murugan
Murugan

Reputation: 1

Add webkit prefix for chrome and safari. I hope it is work fine.

body {
  background: #292f33;
  text-align:center;
  color: #FFF;
  font-family: sans-serif;
}

.btntest {
width: 190px;
padding:4px;
border-radius: 5px;
background: red;
color: white;
z-index:299;
position: fixed;
}

.button {
 position: fixed;
  z-index:300;
  left:10px;
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,1);
}

.button:hover {
  animation: pulse 1.1s ease-out;
  animation-iteration-count: infinite; 
}

@keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(85,172,238,0);
    }
    25% { 
      box-shadow: 0 0 0 2px rgba(85,172,238,.4);
    }
    49.9% { 
      box-shadow: 0 0 0 5px rgba(85,172,238,0);
    }
    50% { 
      box-shadow: 0 0 0 0 rgba(85,172,238,0);
    }
    75% {
      box-shadow: 0 0 0 3px rgba(85,172,238,.6);
    }
    99.9% {
      box-shadow: 0 0 0 7px rgba(85,172,238,0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(85,172,238,0);
    }
  
}

@-webkit-keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(85,172,238,0);
    }
    25% { 
      box-shadow: 0 0 0 2px rgba(85,172,238,.4);
    }
    49.9% { 
      box-shadow: 0 0 0 5px rgba(85,172,238,0);
    }
    50% { 
      box-shadow: 0 0 0 0 rgba(85,172,238,0);
    }
    75% {
      box-shadow: 0 0 0 3px rgba(85,172,238,.6);
    }
    99.9% {
      box-shadow: 0 0 0 7px rgba(85,172,238,0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(85,172,238,0);
    }
  
}
<p>Pulse Effect</p>
<a class="button"></a>
<div class="btntest">dsdsds</div>

Upvotes: 0

Munkhbayar Yo
Munkhbayar Yo

Reputation: 119

Try this: 

.button:hover {
      -webkit-animation: pulse 1.1s ease-out;
      -webkit-animation-iteration-count: infinite; 
      animation: pulse 1.1s ease-out;
      animation-iteration-count: infinite; 
    }
    @keyframes pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(85,172,238,0);
        }
        25% { 
          box-shadow: 0 0 0 2px rgba(85,172,238,.4);
        }
        49.9% { 
          box-shadow: 0 0 0 5px rgba(85,172,238,0);
        }
        50% { 
          box-shadow: 0 0 0 0 rgba(85,172,238,0);
        }
        75% {
          box-shadow: 0 0 0 3px rgba(85,172,238,.6);
        }
        99.9% {
          box-shadow: 0 0 0 7px rgba(85,172,238,0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(85,172,238,0);
        }

    }

    @-webkit-keyframes pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(85,172,238,0);
        }
        25% { 
          box-shadow: 0 0 0 2px rgba(85,172,238,.4);
        }
        49.9% { 
          box-shadow: 0 0 0 5px rgba(85,172,238,0);
        }
        50% { 
          box-shadow: 0 0 0 0 rgba(85,172,238,0);
        }
        75% {
          box-shadow: 0 0 0 3px rgba(85,172,238,.6);
        }
        99.9% {
          box-shadow: 0 0 0 7px rgba(85,172,238,0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(85,172,238,0);
        }

    }

Here is working pen: http://codepen.io/munkhbayar/pen/OPgQaM

Learn CSS3 Animation examples here: http://www.w3schools.com/css/css3_animations.asp

Upvotes: 1

Related Questions