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中的动画吧。

以上关于P26:React高级-CSS3的keyframes动画的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。