css - Webkit 变换在悬停伪旋转时在 safari 中不起作用

Question

我有一个列表项，每个列表项都设置了伪边框，我的悬停效果在 google chrome 中有效但在 safari 中失败，它们都使用相同的渲染引擎，为什么它不起作用？

.page-content ol li:before {
      background: #338ec9;
      background: url(../images/tie.png) no-repeat 0;
      margin-bottom: 1em;
      padding-left: 35px;
      font-size: 1.2em;

  position: absolute;    
  left: 0;
  top: -2px;

  height: 25px;
  width: 17px;
  line-height: 25px;

  font-size: 12px;
  text-align: center;

  border-radius: 2em;
  color: transparent;
  transition: 0.6s;     
}

.page-content ol li:hover:before {        
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}

Answer 1

添加

-webkit-transition:0.6s;

到

.page-content ol li:before

它应该可以达到以下目的:
http://www.w3schools.com/css/css3_transitions.asp