CSS 动画学习笔记——Animation篇

赵晓红 發表於 2020-8-26 11:49:00

首先了解一下 Animation 的基本用法，使用其需要给动画指定一个周期持续的时间，以及动画效果的名称。可以看一下demo
<img src="https://img2020.cnblogs.com/blog/1024013/202008/1024013-20200826102554403-1835736802.gif">
 
注释：这是一个给透明和背景色属性设置的一个动画过渡效果
实现很简单（具体看到代码中的注释）：
<div class="cnblogs_code">
<pre> 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 }</pre>
</div>
除了代码中的注释，另外还需要说一下，opacity 中，从 0%—100%，这是我们给动画指定的一个持续周期，指定了到哪个程度，动画就按照里面的属性进行展示，这个周期是必须的！ 
上面是一个很简单的动画，刷新一次页面即展示一次，如果想要重复地展示动画效果呢？简单，只需要添加一个 infinite 关键字，可以指定循环次数，将 infinite 关键字换成数字即可。
<div class="cnblogs_code">
<pre>1 /*添加infinite关键字，使其可重复*/
2 animation: 4s opacity infinite;</pre>
</div>
 
<img src="https://img2020.cnblogs.com/blog/1024013/202008/1024013-20200826103616587-180854209.gif">
 
注释：这是一个重复展示的动画效果
动画默认在展示完后回到初始状态，有时想让动画定格在最后状态，可以使用 animation-fill-mode 属性，该属性有三个值
<ul>
<li style="text-align: left">none：默认值，动画展示完后回到初始状态</li>
<li style="text-align: left">backwards：动画回到第一帧的状态</li>
<li style="text-align: left">forwards：动画定格在最后状态</li>
<li style="text-align: left">both：根据animation-direction 轮流应用forwards和backwards规则</li>
</ul>
使用：
<div class="cnblogs_code">
<pre> /*直接在后面添加即可*/
 animation: 1s opacity forwards;</pre>
</div>
 
 
下面看一下backwards的效果：
 <img src="https://img2020.cnblogs.com/blog/1024013/202008/1024013-20200826111849583-1916027529.gif">
 
注释：backwards的效果，简单动画时，和none差不多
在上面写demo尝试以上属性时，发现动画循环播放时，其实都是从初始状态开始，那么如果不想这样子呢？有另一个属性 animation-direction 可以定义它的播放，direction 有以下值：
<ul>
<li style="text-align: left">normal：默认值，对动画播放无状态影响</li>
<li style="text-align: left">alternate：改变其播放方向，先是按照正常播放，接着反方向播放，以此循环</li>
<li style="text-align: left">reverse：动画按照反方向播放</li>
<li style="text-align: left">alternate-reverse：先是反方向播放，接着正方向播放，以此循环</li>
</ul>
<div class="cnblogs_code">
<pre> 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 }</pre>
</div>
 
 
 可以使用上面这段代码，更换每个值看一下效果。
我们在上一篇，transition的学习中有提到，transition是有简写形式的，也可以分开来写。同理，animation也是可以这样的，全部的属性简写如下：
<div class="cnblogs_code">
<pre>1 /*第一个为动画持续时间，第二个为动画延迟（delay）时间,第三个为动画效果标题，第四个为动画状态变化速度，第五个为循环次数，第五个为动画状态设置，第六个为动画播放方向*/
2 animation: 1s 1s opacity linear infinite forwards normal;</pre>
</div>
 
分开写也是可以的
<div class="cnblogs_code">
<pre> 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; </pre>
</div>
 在了解animation的过程中，发现在使用animation时，往往配合着 @keyframes，个人理解为，它是一个专属于动画的class，它用来定义动画的各个状态，下来了解一下它的写法，上述所用到的写法
<div class="cnblogs_code">
<pre>1 @keyframes opacity {
2 to {
3 transform: rotate(145deg);
4 }
5 }</pre>
</div>
 
<div class="cnblogs_code">
<pre>1 @keyframes opacity {
2 0% {background: red}
3 25% {background: orange}
4 50% {background: pink}
5 100% {background: black}
6 }</pre>
</div>
 
<div class="cnblogs_code">
<pre> @keyframes opacity {
 from,to { transform: rotate3d(1,1,1,360deg); }
 50% { transform: scale(1.2); }
 }</pre>
</div>
 
另外，需要注意的是，from to，它们其实就是 0%-100%的缩写
 
到了这里，上面的基本上能满足大部分我们项目中的需求了。但是，animation还有一个很好玩的属性——animation-play-state，但从字面意思上来看，很明显就是动画的播放状态。没错，它就是用来控制动画的播放状态。
它有两个值
<ul>
<li>pause：暂停</li>
<li>running：播放</li>
</ul>
这是一个很有意思的属性，如若编写一个很复杂的动画，并且动画持续时间特长，配合上这个属性，我们相当于用CSS制作一个小动画片。看一下这个属性的效果：
<img src="https://img2020.cnblogs.com/blog/1024013/202008/1024013-20200826134958045-1326873302.gif">
 
注释：有了控制播放状态的动画
上面的demo看起来很像是卡顿了，其实并不是，只是用hover来控制了动画的播放状态，所以说这是个很有意思的属性。这一段的代码如下：
<div class="cnblogs_code">
<pre> 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 }</pre>
</div>
 
 
以上就是关于CSS Animation的内容了，相信这篇文章的内容能够满足到大部分的动画需求了。
另外，使用的时候，需要注意一些东西，那就是浏览器的兼容问题。有些浏览器并不能够很好兼容，所以在使用时，写法上要是这样的
<div class="cnblogs_code">
<pre>-ms-animation @-ms-keyframes /* IE 9 */
-moz- /* Firefox */
-webkit- /* Safari 和 Chrome */
-o- /* Opera */</pre>
</div>
  
来源：https://www.cnblogs.com/zhichong/p/13564228.html

頁: [1]

琼殿技术论坛's Archiver

CSS 动画学习笔记——Animation篇