0

我正在尝试学习 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;
    }

我读过这个，这个和这个。有人介意向我解释一下吗？}

4

2 回答 2

3

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

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

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

1s是动画的长度？

是的。

缓进出我不明白

ease-in-out是一个动画计时功能，它指定如何从 0% 过渡到 100%（或其他方式）。Ease in out 将动画的每一个进出，所以变化不会那么突然，另一个例子是线性的，它将以完全统一的方式变化。

此页面上有一个方便的图表，可以比文字更好地解释差异。

.6s 是延迟

是的。

我没有倒退，也找不到任何关于它的信息

backwards并forwards用于动画填充模式，它表示动画应该去的切换方向。如果forwards选中则动画将从 0%（透明）运行到 100%（不透明），如果backwards选中则动画将从 100% 运行到 0%。

进一步阅读

于 2013-04-05T10:02:28.857 回答
1

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

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

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

关键帧是使用专门的 CSS 规则指定的。@keyframes 规则包含关键字“@keyframes”，后跟一个为动画命名的标识符（将使用 'animation-name' 引用），然后是一组样式规则（由大括号分隔）。[来源]

  • 1s是动画的长度？
  • 缓进出我不明白
  • .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。这基本上是一个修改时间的贝塞尔曲线。例如，您想在开始和结束时加快动画的速度，并在中间具有更线性的行为。

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

  • 我没有倒退，也找不到任何关于它的信息

看看animation-fill-mode：

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

于 2013-04-05T10:08:08.313 回答