Learn How the CSS @keyframes and animation Properties Work

学习如何使用CSS的@keyframes和animation属性

理解

为元素添加动画，你需要知道动画的属性和@keyframes规则。动画属性控制动画的表现，@keyframes规则控制动画发生什么。

这里共有8个动画属性。这个挑战保持简单原则，覆盖最重要的两个，

animation-name设置动画的名字，会被@keyframes用于告诉CSS那个动画用哪个规则。

animation-duration设置动画的时间长度。

@keyframes详述了整个动画期间发生了什么，百分比是0%-100%。如果你将它和电影比较，CSS属性的0%意思是元素开场如何表现。100%是元素结尾如何表现，也就是在动画落幕的右边。

CSS应用使用magic在整个变形这个元素，下面举例

#anim {
    animation-name: colorful;
    animation-duration: 3s;
}

@keyframe colorful {
    0%{
        background-color: blue;
    }
    100% {
        background-color: yellow;
     }
}

对于id为anim的元素，这个元素片段设置animation-name为colorful,设置animation-duration为3秒。

@keyframe原则链接colorful属性，设置开始（0%）为蓝色，结束（100%）时变为黄色。当然，你也可以设置其他进度（百分比）是的元素属性。

练习

来源

CHANGELOG