Question

.fromRight.box{
    -webkit-animation: fromRightbox 0.6s ease-in 0.8s both;
    -moz-animation: fromRightbox 0.6s ease-in 0.8s both;
    -o-animation: fromRightbox 0.6s ease-in 0.8s both;
    -ms-animation: fromRightbox 0.6s ease-in 0.8s both;
    animation: fromRightbox 0.6s ease-in 0.8s both;
}

@-webkit-keyframes fromRightbox {
    0%{ left: 110%; opacity: 1; }
    100%{ left: 25%; opacity: 1; }
}
@-moz-keyframes fromRightbox {
    0%{ left: 110%; opacity: 1; }
    100%{ left: 25%; opacity: 1; }
}
@-ms-keyframes fromRightbox {
    0%{ left: 110%; opacity: 1; }
    100%{ left: 25%; opacity: 1; }
}
@-o-keyframes fromRightbox {
    0%{ left: 110%; opacity: 1; }
    100%{ left: 25%; opacity: 1; }
}

我想知道是否有人可以向我解释animation: fromRightbox 0.6s ease-in 0.8s both;行，因为我试图理解0.6s ease-in的含义以及0.8 both的含义。

由于

Answer 1

0.6s =动画持续时间 动画持续时间CSS属性指定动画完成一个周期所需的时间长度。

ease-in =动画计时功能 CSS animation-timing-function属性指定CSS动画在每个周期的持续时间内应如何进展。

both =动画填充模式 动画填充模式CSS属性指定CSS动画在执行之前和之后应如何将样式应用于目标。

动画延迟 动画延迟CSS属性指定动画何时开始。这使得动画序列在应用于元素后的某个时间开始。

这些资源将帮助您了解更多信息

http://dev.w3.org/csswg/css-animations/
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

CSS动画和时间安排

1 个答案: