html - 如何使 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