标签: webkit-animation

我正在为iPad和其他平板电脑编写一个webapp,并且在关注正确有效的定位和动画之后会出现很多视口问题.我最近提出了为所有自由浮动元素使用-webkit-transform的想法.我的问题是,使用CSS规范提供的转换对于平滑可靠的动画更好,而不是例如更改position:relative元素内的lrtb值吗？ 随着硬件加速,我发现移动元素中发生随机闪烁,特别是在方向变化时.(绝对定位的元素)所以,看到没有值得注意的博客使用这种方法,我想检查是否有一些专业的原因,这是一个坏主意.

我写了一个关键帧动画:

@-webkit-keyframes cubemove {
0% {-webkit-transform: translateZ(-194px) rotateY(0deg);}
20% {-webkit-transform: translateZ(-194px) rotateX(-180deg);}
40% {-webkit-transform: translateZ(-194px) rotateX(-90deg);}
60% {-webkit-transform: translateZ(-194px) rotateX(90deg);}
80% {-webkit-transform: translateZ(-488.5px) rotateY(90deg);}
90% {-webkit-transform: translateZ(-488.5px) rotateY(-90deg);}
100% {-webkit-animation-play-state:paused;}
}

.cubebox {
-webkit-animation: cubemove 30s ease-in-out 5s 1 normal;
}

我想在我使用以下html和查询代码编写的矩形上运行此动画:

<figure id="box">
<img src="/images/cube/step1.jpg"/>
<img src="/images/cube/step2.jpg"/>
<img src="/images/cube/step3.jpg"/>
<img src="/images/cube/step4.jpg"/>
<img src="/images/cube/step5.jpg"/>
<img src="/images/cube/step6.jpg"/>
</figure>

<button class="commencer">Start</button>

<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function(){
    $('.commencer').click(function(){
        $('#box').addClass('cubemove');
    });

    $('.commencer').click(function(){
        $(this).removeClass('cubemove');
    });
});

</script>

事情是,当我点击按钮时没有任何事情发生.我对jquery不是很好,所以这可能是问题所在.

非常感谢您的帮助!

马特

我试图在 3 秒后消失 Bootstrap 警报。我做到了，但它只是消失并保持 div 的高度。我可以只用 CSS 删除那个 div 吗？我试过显示：无；它也不起作用。我需要帮助。

这就是我所做的：

CSS：

.alert-success {
    -webkit-animation: fadeOut 3s linear forwards;
    animation: fadeOut 3s linear forwards;
}


@-webkit-keyframes fadeOut {
    0%   {opacity: 1;}
    70%  {opacity: 1;}
    90% {opacity: 1;-webkit-transform: translateY(0px);}
    100% {opacity: 0;-webkit-transform: translateY(-30px);}
}

HTML：

<div class="alert alert-success">
   Well done! You successfully read this important alert message.
</div>

提前致谢

在通过JavaScript使用更改animation-duration（或在本例中为-webkit-animation-duration）属性后setProperty("-webkit-animation-duration", value + "s")，我在Chrome的元素检查器中看到了更改，但实际的动画速度没有变化。另外，如果我在元素检查器中手动更改值，则也不会更改。

我已经设置了一个输入字段来获取动画速度值，该值连接到以下事件侦听器（orbitFactor是在其他位置定义的全局变量）：

function updateSpeed(event) {
     var planetDiv = document.getElementById(event.target.id);
     planetDiv.style.setProperty("width", event.target.value / orbitFactor);
     planetDiv.style.setProperty("height", event.target.value / orbitFactor);
     planetDiv.style.setProperty("-webkit-animation-duration", event.target.value + "s");
}

肯定会调用事件侦听器，并且-webkit-animation-duration元素检查器中的值确实会更改，但动画的速度不会更改。关于这里我有什么想念的-webkit-animation-duration吗？我使用相同方法更改的其他属性（例如width和height）确实发生了明显变化。

提前致谢

编辑：请注意，这是Chrome 40中的问题，但在Chrome 42和Firefox 35中可以正常工作。