Question

请你看一下this Demo，让我知道为什么关键帧动画无效＆gt;

<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/

＆＃13;

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

＆＃13;

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

＆＃13;

（而不是添加回xBrowser -vendor-前缀）

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

1 个答案: