将关键帧添加到动画的问题 div

Question

能否请您看一下 this Demo 并告诉我为什么关键帧动画不起作用>

<div class="showbox"></div>

<style>
.showbox {
    height:15px;
    width:15px;
    background:red;
    border-radius: 25px;
    -webkit-transition:1s ease-in-out;
    -moz-transition:1s ease-in-out;
    -o-transition:1s ease-in-out;
    transition:1s ease-in-out -webkit-animation-name: pulse;
    -webkit-animation-duration: 1000ms;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform:scale(1);
        transform:scale(1);
    }
    25% {
        -webkit-transform:scale(1.2);
        transform:scale(1.2);
    }
    50% {
        -webkit-transform:scale(1.3);
        transform:scale(1.3);
    }
    75% {
        -webkit-transform:scale(1.2);
        transform:scale(1.2);
    }
    100% {
        -webkit-transform:scale(1);
        transform:scale(1);
    }
}
</style>

谢谢

Answer 1

最简单的变体http://jsfiddle.net/darLuges/2/

.showbox {
  height:15px;
  width:15px;
  background:red;
  border-radius: 25px;
  transform-origin:50% 50%;
  transform:scale(1);
  animation: pulse 0.6s infinite linear alternate;
}
@keyframes pulse {
  to  {transform:scale(1.3);}
}

<div class="showbox"></div>

（比重新添加 xBrowser -vendor- 前缀）

将关键帧添加到动画的问题 div

Issue on Adding Keyframe to animated div

css

css-animations