Question

我一直试图找到一个解决方案，让我可以使用CSS3将我的Safari浏览器应用于动画。我已经在我的css上声明了webkit，以便在chrome或safari上进行工作。在mozilla中它完美地动画，但在safari / chrome中它只会使文本出现

这是小提琴（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%)更改为to{}

@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;
    `------------------------^`           `^---------------` 
  }

}

Webkit关键帧不适用于safari或chrome

1 个答案: