如何使Css过渡效果在Safari和Chrome上有效？

Question

我有一个示例http://codepen.io/carlosjgsousa/pen/xaewg，并且在使代码在Chrome和Safari上运行时遇到问题，它在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;
}

感谢您解决此问题！

Answer 1

试试这个：

.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);
        }

    }

这是工作笔：http://codepen.io/munkhbayar/pen/OPgQaM

在此处学习CSS3动画示例：http://www.w3schools.com/css/css3_animations.asp

Answer 2

为chrome和safari添加webkit前缀。我希望它能正常工作。

＆＃13;

＆＃13;

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);
    }
  
}

＆＃13;

<p>Pulse Effect</p>
<a class="button"></a>
<div class="btntest">dsdsds</div>

＆＃13;

＆＃13;

＆＃13;