css - 在理解 CSS3 动画方面需要帮助

Question

我正在尝试学习 CSS3 中的动画，但我坚持使用那里的所有文档。我有这段代码:

h1{
        -webkit-animation: moveDown 1.s ease-in-out .6s backwards;
        -moz-animation: moveDown 1s ease-in-out 0.6s backwards;
        -o-animation: moveDown 1s ease-in-out 0.6s backwards;
        -ms-animation: moveDown 1s ease-in-out 0.6s backwards;
        animation: moveDown 1s ease-in-out 0.6s backwards;
    }
    @-webkit-keyframes moveDown{
        0% { 
            -webkit-transform: translateY(-300px); 
            opacity: 0;
        }
        100% { 
            -webkit-transform: translateY(0px);  
            opacity: 1;
        }
    }

    @-moz-keyframes moveDown{
        0% { 
            -moz-transform: translateY(-40px); 
            opacity: 0;
        }
        100% { 
            -moz-transform: translateY(0px);  
            opacity: 1;
        }
    }

    @-o-keyframes moveDown{
        0% { 
            -o-transform: translateY(-40px); 
            opacity: 0;
        }
        100% { 
            -o-transform: translateY(0px);  
            opacity: 1;
        }
    }

• 我了解 webkit-animation - animation 是每个浏览器的调用。
• 我不明白 modeDown。这像一个变量吗？
• 1s 是动画的长度？
• 缓入缓出我不明白
• .6s是延迟
• 我没有倒退也找不到任何信息

这是为了时序？

@-moz-keyframes moveDown{
    0% { 
        -moz-transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        -moz-transform: translateY(0px);  
        opacity: 1;
    }

我读过 this , this和 this .有人介意向我解释一下吗？

Answer 1

我不明白 modeDown。这像一个变量吗？

动画 moveDown 从 opacity:0 和 -moz-transform:translateY(-40px) 开始，在 opacity 结束: 1 和 -moz-transform: translateY(0px)。这意味着它开始时完全透明并在正常位置上方移动 40 像素，并在其常规位置结束时完全不透明。

@-moz-keyframes moveDown{
    0% { 
        -moz-transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        -moz-transform: translateY(0px);  
        opacity: 1;
    }
}

1s 是动画的长度？

是的。

ease-in-out 不懂

ease-in-out 是一个 animation-timing-function , 这指定了如何从 0% 过渡到 100%(或其他方式)。 Ease in out 将每次进出动画，这样变化就不会那么突然，另一个例子是线性的，它将以完全统一的方式变化。

有一个handy chart on this page这比文字更能解释差异。

.6s是延迟

是的。

我没有倒退也找不到任何信息

backwards 和 forwards 用于 animation-fill-mode这表示动画应该去的切换方向。如果选择 forwards，则动画将从 0%(透明)运行到 100%(不透明)，如果选择 backwards，则动画将从 100% 运行到 0 %.

进一步阅读

• > The Art of the Web - timing functions
• > CSS3 animations spec
• > Mozilla developer - animation