CSS 动画学习笔记—

首先了解一下 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 */

CSS 动画学习笔记——Animation篇相关推荐

D3D角色动画学习笔记（一）——角色动画简介与初步规划
D3D角色动画学习笔记(一)--角色动画简介与初步规划写这个系列是基于自己学习角色动画之后,相对自己的成果做一个整理,还可以给大家做一个角色动画的预览,可能会节省大家的一点时间,同时也希望各位大神能 ...
Scss、elementUI引入、transition动画 - 学习笔记
文章目录 Scss.elementUI引入.transition动画 - 学习笔记 Sass 是什么? elementUI transition动画 Scss.elementUI引入.transiti ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
Android动画学习笔记
Android实战经验之图像处理及特效处理的集锦 https://www.oschina.net/question/231733_44154 Android动画学习笔记 3.0以前,android支持 ...
Vue学习笔记进阶篇——多元素及多组件过渡
本文为转载,原文:Vue学习笔记进阶篇--多元素及多组件过渡多元素的过渡对于原生标签可以使用 v-if/v-else.但是有一点需要注意: 当有相同标签名的元素切换时,需要通过 key 特性设置唯 ...
极客HTTP协议学习笔记破冰篇(1-7)
极客HTTP协议学习笔记破冰篇(1-7) 前言各篇章笔记链接一.学习笔记 1.HTTP的前世今生 2.HTTP是什么 3.与HTTP相关的各种概念(上) 4.与HTTP相关的各种概念(下) 5.常 ...
C4D R26 渲染学习笔记建模篇（2）：手动建模
文章目录前文回顾介绍篇建模篇手动建模建模快捷键手动模型快捷键大全常用操作 N系快捷键 K系快捷键 U系快捷键结尾前文回顾介绍篇 C4D R26 渲染学习笔记(1):C4D版本选择和 ...
C4D R26 渲染学习笔记建模篇（1）：参数模型
往期文章介绍篇 C4D R26 渲染学习笔记(1):C4D版本选择和初始UI框介绍 C4D R26 渲染学习笔记(2):渲染流程介绍 C4D R26 渲染学习笔记(3):物体基本操作+快捷键建模篇 ...
[mmu/cache]-ARM MMU的学习笔记-一篇就够了
★★★ 个人博客导读首页-点击此处 ★★★ . 说明: 在默认情况下,本文讲述的都是ARMV8-aarch64架构,linux kernel 64位 . 相关文章 1.ARM cache的学习笔记-一 ...

CSS 动画学习笔记——Animation篇

CSS 动画学习笔记——Animation篇相关推荐

最新文章

热门文章