P26:React高级-CSS3的keyframes动画

用transition只能作一些最简单的动画，如果你想稍微复杂点，transition就做不出来了。这时候就可以用 CSS3 中的关键帧动画keyframes。本文就花几分钟学习一下 keyframes，如果你 CSS3 动画部分的知识很好，完全可以跳过这节课。

keyframes 动画介绍

此属性与animation属性是密切相关的，keyframes译成中文就是关键帧，我最早接触这个关键帧的概念是字 flash 中，现在 Flash 已经退出历史舞台了。它和transition比的优势是它可以更加细化的定义动画效果。比如我们设置上节课的按钮隐藏动画，不仅可以设置透明度，还可以设置颜色。

@keyframes hide-item{
    0% {
        opacity:1;
        color:yellow;
    }
    50%{
        opacity: 0.5 ;
        color:red;
    }
    100%{
        opacity:0;
        color: green;
    }
}

这就算是你的动画制作好了，但是动画还没有使用。

使用动画

使用动画的关键词是animation，然后后边跟上你的制作的动画名称，如下面这段代码。

.hide{ animation:hide-item 2s ease-in ; }

这句的意思就是,使用hide-item动画，持续时间是 2 秒钟，然后缓动效果是由慢到快（开始的时候慢，之后快）。

但是你会发现，动画执行一遍后又恢复了原状，这个是因为没设置forwards属性，它是用来控制停止到最后一帧的。 我们把代码改写成下面的样子。

.hide{ animation:hide-item 2s ease-in forwards; }

完整 CSS 代码的实现

那keyframes的动画已经基本学会了，接下来就把所有的代码修改为keyframes的形式吧。所有代码如下：

.show{ animation:show-item 2s ease-in forwards; }
.hide{ animation:hide-item 2s ease-in forwards; }

@keyframes hide-item{
    0% {
        opacity:1;
        color:yellow;
    }
    50%{
        opacity: 0.5 ;
        color:red;
    }
    100%{
        opacity:0;
        color: green;
    }
}

@keyframes show-item{
    0% {
        opacity:0;
        color:yellow;
    }
    50%{
        opacity: 0.5 ;
        color:red;
    }
    100%{
        opacity:1;
        color: green;
    }
}

最终动画效果如下：

总结

keyframes也是只能实现很简单的动画效果，一些复杂的动画最好还是使用别人造好的轮子，下节课继续学习React中的动画吧。