IT新人报道——简单介绍CSS3动画

依然～ 2019-01-18 05:03:53

IT新人报道——简单介绍CSS3动画

开发工具和关键技术：Adobe Dreamweaver CC 2017，HTML+CSS3动画

作者：金建勇

撰写时间：2019年1月18日

1、首先我们简单介绍一下css3动画；
Css3动画主要可以完成旋转；位移；扭曲；缩放；等一些基本动画效果，
如果想实现动画就需要先定义一个动画然后再去调用这个动画。
2、下面我们再了解一下这些基本动画属性：

旋转-transform: rotate(X,Y,Z);
位移- transform: translate(X,Y,Z);
扭曲- transform: skew(X,Y);
缩放- transform: scale(X,Y,Z); 。
定义动画：@keyframes 调用动画：animation。
1、---------------------------------------------------------旋转--------------------------------------------------------

2、---------------------------------------------------------位移--------------------------------------------------------

3、---------------------------------------------------------扭曲--------------------------------------------------------

4、---------------------------------------------------------缩小--------------------------------------------------------

5、---------------------------------------------------------放大--------------------------------------------------------

以上例子只是一些动画效果，而实际上要实现真正的动画，还需要用到 @keyframes定义动画，然后再用 animation来调用动画才能完成。下面我们就来看看如何定义动画和调用动画：
首先我们定义一个动画，并给它命名
其中 go 就是动画的名称， 0% 是动画开始，100% 是动画结束，中间就是动画演变的过程。在定义动画中我们还能用到很多其他css样式来完成动画，例如定位，背景颜色变化，字体颜色变化等等。

好了，定义了一个动画之后我们只要再去调用它，就能实现动画了。
调用动画用到的animation属性，还包括有：

**animation-name**：规定动画名称。
**animation-duration**：规定动画完成一周期所需要的时间。
**animation-timing-function**：规定动画的速度曲线。
属性值有：
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。

**animation-delay**：规定动画开始前的延迟时间。
**animation-iteration-count**：规定动画播放的次数。Infinite 为无限次播放。
**animation-direction**：规定动画在下一周期是否逆向播放。
normal 默认值，正常播放；
alternate 动画轮流反向播放。

**animation-play-state**：规定动画的暂停与播放。paused 暂停动画；running 播放动画。
**animation-fill-mode**：规定动画在播放之前或播放之后的状态，其动画效果是否可见。
默认值为 none；
其他属性值：
forwards：动画完成后保持最后一个属性值。
Backwards：在动画播放之前保持的属性值。
both：播放前后都被应用。
代码见下图：

这样看起来要实现一个动画代码量太多了，所有我们就有一个简写属性animation，
可以直接设置
animation-name；animation-duration；animation-timing-function；
animation-delay；animation-iteration-count；animation-direction；
这六个属性的属性值。所有上图代码就能简写成下面的代码：