动画css动画速度控制

时间:2015-05-22 05:31:09

标签: javascript css css3 animation css-animations

我正在研究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代码 专家请指导

谢谢

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

嘿,你基本上想要加快你的动画速度吗?

要加快css3动画,你应该减少动画持续时间,如果你想减慢你的动画,你应该增加动画的持续时间。

动画延迟是用来延迟动画开始的不同。

示例:

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

See This

谢谢。