CSS 动画学习笔记——Animation篇

首先了解一下 Animation 的基本用法，使用其需要给动画指定一个周期持续的时间，以及动画效果的名称。可以看一下demo

 

注释：这是一个给透明和背景色属性设置的一个动画过渡效果

实现很简单（具体看到代码中的注释）：

 1         .block_wrap {
 2             width: 500px;
 3             height: 500px;
 4             background: #e3e3e3;
 5             /*第一个参数为这个动画的持续时间，第二个参数是动画效果的标题，可以理解为定义一个class，不过这是专属于动画的class*/
 6             animation: 4s opacity;
 7             margin: 0 auto;
 8         }
 9         /*动画效果，opacity为效果标题，@keyframes必须要写*/
10         @keyframes opacity {
11             0% {opacity: 0; background: }
12             25% {opacity: 0.25}
13             50% {opacity: 0.5}
14             100% {opacity: 1; background: red}
15         }

除了代码中的注释，另外还需要说一下，opacity 中，从 0%—100%，这是我们给动画指定的一个持续周期，指定了到哪个程度，动画就按照里面的属性进行展示，这个周期是必须的！ 

上面是一个很简单的动画，刷新一次页面即展示一次，如果想要重复地展示动画效果呢？简单，只需要添加一个 infinite 关键字 ，可以指定循环次数，将 infinite 关键字换成数字即可。

1             /*添加infinite关键字，使其可重复*/
2             animation: 4s opacity infinite;

 

 

注释：这是一个重复展示的动画效果

动画默认在展示完后回到初始状态，有时想让动画定格在最后状态，可以使用 animation-fill-mode 属性，该属性有三个值

  • none：默认值，动画展示完后回到初始状态
  • backwards：动画回到第一帧的状态
  • forwards：动画定格在最后状态
  • both：根据animation-direction 轮流应用forwards和backwards规则

使用：

            /*直接在后面添加即可*/
            animation: 1s opacity forwards;

 

 

下面看一下backwards的效果：

 

 

注释：backwards的效果，简单动画时，和none差不多

在上面写demo尝试以上属性时，发现动画循环播放时，其实都是从初始状态开始，那么如果不想这样子呢？有另一个属性 animation-direction 可以定义它的播放，direction 有以下值：

  • normal：默认值，对动画播放无状态影响
  • alternate：改变其播放方向，先是按照正常播放，接着反方向播放，以此循环
  • reverse：动画按照反方向播放
  • alternate-reverse：先是反方向播放，接着正方向播放，以此循环
 1         .block_wrap {
 2             width: 500px;
 3             height: 500px;
 4             background: #e3e3e3;
 5             /*添加infinite关键字，使其可重复,接着更换每个不同值看效果*/
 6             animation: 1s opacity infinite alternate-reverse;
 7             margin: 0 auto;
 8         }
 9         /*动画效果，opacity为效果标题，@keyframes必须要写*/
10         @keyframes opacity {
11             to {
12                 transform: rotate(360deg);
13             }
14         }

 

 

 可以使用上面这段代码，更换每个值看一下效果。

我们在上一篇，transition的学习中有提到，transition是有简写形式的，也可以分开来写。同理，animation也是可以这样的，全部的属性简写如下：

1             /*第一个为动画持续时间，第二个为动画延迟（delay）时间,第三个为动画效果标题，第四个为动画状态变化速度，第五个为循环次数，第五个为动画状态设置，第六个为动画播放方向*/
2             animation: 1s 1s opacity linear infinite forwards normal;

 

分开写也是可以的

 1             /*动画标题*/
 2             animation-name: opacity;
 3             /*动画持续时间*/
 4             animation-duration: 1s;
 5             /*动画状态变化速度*/
 6             animation-timing-function: linear;
 7             /*动画延迟（delay）时间*/
 8             animation-delay: 1s;
 9             /*动画状态设置*/
10             animation-fill-mode:forwards;
11             /*动画播放方向*/
12             animation-direction: normal;
13             /*循环次数*/
14             animation-iteration-count: infinite;

 在了解animation的过程中，发现在使用animation时，往往配合着 @keyframes，个人理解为，它是一个专属于动画的class，它用来定义动画的各个状态，下来了解一下它的写法，上述所用到的写法

1         @keyframes opacity {
2             to {
3                 transform: rotate(145deg);
4             }
5         }

 

1         @keyframes opacity {
2             0% {background: red}
3             25% {background: orange}
4             50% {background: pink}
5             100% {background: black}        
6         }

 

        @keyframes opacity {
            from,to { transform: rotate3d(1,1,1,360deg); }
              50% { transform: scale(1.2); }    
        }

 

另外，需要注意的是，from to，它们其实就是 0%-100%的缩写

 

到了这里，上面的基本上能满足大部分我们项目中的需求了。但是，animation还有一个很好玩的属性——animation-play-state，但从字面意思上来看，很明显就是动画的播放状态。没错，它就是用来控制动画的播放状态。

它有两个值

  • pause：暂停
  • running：播放

这是一个很有意思的属性，如若编写一个很复杂的动画，并且动画持续时间特长，配合上这个属性，我们相当于用CSS制作一个小动画片。看一下这个属性的效果：

 

注释：有了控制播放状态的动画

上面的demo看起来很像是卡顿了，其实并不是，只是用hover来控制了动画的播放状态，所以说这是个很有意思的属性。这一段的代码如下：

 1         .block_wrap {
 2             width: 300px;
 3             height: 300px;
 4             background: #e3e3e3;
 5             animation: 1s opacity linear infinite forwards normal;
 6             /*动画原本的状态是暂停的*/
 7             animation-play-state: paused;
 8             margin: 0 auto;
 9         }
10         /*动画效果，opacity为效果标题，@keyframes必须要写*/
11         @keyframes opacity {
12             from,to { transform: rotate3d(1,1,1,180deg); }
13               50% { transform: rotate(45deg);}    
14         }
15         /*当鼠标放上来时，动画才会进行*/
16         .block_wrap:hover {
17             animation-play-state: running;
18         }

 

 

以上就是关于CSS Animation的内容了，相信这篇文章的内容能够满足到大部分的动画需求了。

另外，使用的时候，需要注意一些东西，那就是浏览器的兼容问题。有些浏览器并不能够很好兼容，所以在使用时，写法上要是这样的

-ms-animation @-ms-keyframes     /* IE 9 */
-moz-     /* Firefox */
-webkit- /* Safari 和 Chrome */
-o-     /* Opera */

 

posted @ 2020-08-26 11:49  vegetbaleBrid  阅读(293)  评论(0)  编辑  收藏  举报