动画 css 动画速度控制答案

【问题标题】：animate css animations speed control动画 css 动画速度控制
【发布时间】：2015-05-22 05:31:08
【问题描述】：

我正在处理animate.css，我想提高动画速度但是有延迟时间速度可以提高但是经过一些延迟但我不想延迟这里有三个参数首先是为了延迟其他两个的目的？ -webkit-transform: translate3d(3000%, 0, 0)

@-webkit-keyframes slideInRight {   0% {
    -webkit-transform: translate3d(3000%, 0, 0);
    transform: translate3d(3000%, 0, 0);
    visibility: visible;   }   30% {
        -webkit-transform: translate3d(3000%, 0, 0);
        transform: translate3d(3000%, 0, 0);
        visibility: visible;
    }   100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);   } }

@keyframes slideInRight {   0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;   }
    30% {
        -webkit-transform: translate3d(3000%, 0, 0);
        transform: translate3d(3000%, 0, 0);
        visibility: visible;
    }   100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);   } }

.slideInRight {   -webkit-animation-name: slideInRight;   animation-name: slideInRight; }

这是我正在使用的 CSS 代码请高手指导

谢谢

【问题讨论】：

标签： javascript css animation css-animations

【解决方案1】：

3个参数是 translate3d(x,y,z)

【讨论】：

感谢您的回复，请告诉我如何才能毫不拖延地提高动画速度，我希望尽可能快

【解决方案2】：

嘿基本上你想加快你的动画，对吧？

要加快 css3 动画的速度，您应该减少动画的持续时间，如果您想减慢动画的速度，您应该增加动画的持续时间。

动画延迟是一个不同的，它用于延迟动画开始。

例子：

#yourElement {
-vendor-animation-duration: 3s; /*This is the animation duration */
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}

See This

谢谢。

【讨论】：

嘿#chamath 感谢您的回复。是的，你是对的，我想加快我的动画速度，但它不起作用:(你能解释一下吗
好的。你能试试这个吗， .yourElement{ -webkit-animation-name: slideInRight ; /* Chrome、Safari、Opera */ 动画名称：slideInRight ; -webkit 动画持续时间：3 秒； -moz 动画持续时间：3 秒；动画持续时间：3s；那么你的浏览器是什么？请在上面使用并告诉我
感谢您的帮助，它现在正在工作，实际上我正在使用 phonegape 应用程序，所以这将在 safari 中实现，所以现在速度已经提高了，非常感谢您的支持 :)
是的，这是我的第一个应用程序，所以从现在开始面临一些障碍，我将使用 ionic ...:)