如何使 Css 过渡效果在 Safari 和 Chrome 上工作？答案

【问题标题】：How to make Css transition effect work on Safari and Chrome?如何使 Css 过渡效果在 Safari 和 Chrome 上工作？
【发布时间】：2015-03-23 21:45:45
【问题描述】：

我有一个示例 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;
}

感谢您解决这个问题！

【问题讨论】：

Webkit 浏览器需要-webkit- 前缀版本的animation 和keyframes 属性……

标签： html css google-chrome safari css-transitions

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

试试这个：

.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

【讨论】：