jquery - Webkit 关键帧不适用于 safari 或 chrome

Question

我一直在努力寻找一种解决方案，了解如何让我的 Safari 浏览器使用 CSS3 应用动画。我已经在我的 css 上声明了 webkit，以便在 chrome 或 safari 上工作。在 mozilla 中它完美地动画，但在 safari/chrome 中它只使文本出现

这是 fiddle (http://jsfiddle.net/clestcruz/azSCP/1/)，下面是代码

HTML

<div class="animation">
    <div>a</div>
    <div>n</div>
    <div>i</div>
    <div>m</div>
    <div>a</div>
    <div>t</div>
    <div>e</div>
</div>

CSS

.animation div{
    float:left; 
    text-transform:uppercase; 
    font-size:80px;
    display:inline; 
    margin-right:5px;
    visibility:hidden
}

.animate_letters{
    -moz-animation:fancytext 1s cubic-bezier(0.3, 2, 0.35, 1.45) 0s normal none 1;
    -webkit-animation:fancytext 1s cubic-bezier(0.3, 2, 0.35, 1.45) 0s normal none 1;
    animation:fancytext 1s cubic-bezier(0.3, 2, 0.35, 1.45) 0s normal none 1;
    visibility:visible !important
}

@keyframes fancytext{
  from {
    transform: scale(0) translateX(-40%); opacity:0;
    -webkit-transform: scale(0) translateX(-40%); opacity:0;
  }

  to {
    transform: scale(1) translateX(0%); opacity:1;
    -webkit-transform: scale(0) translateX(-40%); opacity:1;
  }

}

@-webkit-keyframes fancytext{
  from {
    transform: scale(0) translateX(-40%); opacity:0;
    -webkit-transform: scale(0) translateX(-40%); opacity:0;
  }

  to {
    transform: scale(1) translateX(0%); opacity:1;
    -webkit-transform: scale(0) translateX(-40%); opacity:1;
  }

}

JavaScript

<script>
    $(document).ready(function(){

    $('.animation div').each(function(ii){
        var data = $(this);
        setTimeout( function () {
            $(data).addClass('animate_letters')
        }, ii * 100);
    })
})
</script>

Answer 1

已更新 Fiddle

将 scale(0) translateX(-40%) 更改为 scale(1) translateX(0%) ，在 中{}

@keyframes fancytext{
  from {
    transform: scale(0) translateX(-40%); opacity:0;
    -webkit-transform: scale(0) translateX(-40%); opacity:0;
  }

  to {
    transform: scale(1) translateX(0%); opacity:1;
    -webkit-transform: scale(1) translateX(0%); opacity:1;
    `------------------------^`           `^---------------`
  }

}

@-webkit-keyframes fancytext{
  from {
    transform: scale(0) translateX(-40%); opacity:0;
    -webkit-transform: scale(0) translateX(-40%); opacity:0;
  }

  to {
    transform: scale(1) translateX(0%); opacity:1;
    -webkit-transform: scale(1) translateX(0%); opacity:1;
    `------------------------^`           `^---------------` 
  }

}