P24:React高级-CSS3的关键帧keyframes动画

电玩女神 2023-10-06 20:52 51阅读 0赞

#### React16 基础 ####

*  阐述
 *  keyframes动画介绍
 *  使用动画
 *  完整CSS代码的实现
 *  总结

## 阐述 ##

用 `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;
        }
    }

最终动画效果如下：

![在这里插入图片描述][0eb47e03c5c242c4bd3581f48fcaec5b.gif_pic_center]

## 总结 ##

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

[0eb47e03c5c242c4bd3581f48fcaec5b.gif_pic_center]: https://img-blog.csdnimg.cn/0eb47e03c5c242c4bd3581f48fcaec5b.gif#pic_center