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是动画的长度？
easy-in-out我不明白
.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是animation-timing-function，它指定了如何从0％过渡到100％（或其他方式）。轻松将动画中的每个内部和每个动画因此变化不会如此突然，另一个例子是线性的，它将以完全统一的方式改变。

有一个handy chart on this page可以更好地解释差异。

.6s是延迟

是

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

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

进一步阅读

Answer 2

通常最好从W3C阅读实际的working drafts（或建议），因为它们提供了完整的信息：

我不明白modeDown。那是一个变量吗？

你可以这么说，但变量通常是可变的，而moveDown只是动画的标识符。所以它只是动画的名字：

使用专门的CSS at-rule指定关键帧。 @keyframes规则由关键字“@keyframes”组成，后跟一个标识符，给出动画的名称（将使用'animation-name'引用），后跟一组样式规则（由花括号分隔）。 [source]

1s是动画的长度？

easy-in-out我不明白

.6s是延迟

animation属性是一次显示多个animation-*属性的简写：

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

正如您所看到的，第一个属性是动画的名称（见上文），第二个属性是实际长度，第三个属性是时间函数，在您的情况下为ease-in-out。这是basically a bezier-curve，它修改了时间。例如，您希望在开头和结尾加速动画，并在中间具有更线性的行为。

.6s确实是动画之间的延迟。

我没有倒退，也无法找到任何信息

查看animation-fill-mode：

如果'animation-fill-mode'的值为'向后'，则动画将应用在关键帧中定义的属性值，这将在动画延迟定义的时间段内开始动画的第一次迭代”。这些是'from'关键帧的值（当'animation-direction'是'normal'或'alternate'时）或者'to'关键帧的值（当'animation-direction'''reverse'或'alternate-反向'）。

需要帮助了解CSS3动画

2 个答案:

进一步阅读