前言

CSS3可以实现HTML元素的动画效果，不使用JavaScript或者是Flash也能实现动画效果，在CSS3中新增了一个transition模块，通过一些简单的CSS 事件来触发元素的外观变化，使得显示的效果更加细腻。

一、keyframes定义动画

使用@keyframes规则，可以创建动画，指定变化时用0%到100%，或关键词“from”和“to”，0%是动画的开头，100%是动画的结尾。我们把名称定义为move，关键代码如下：

@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px); //沿着X轴移动1000像素。
}
}

二、元素使用动画

1.关键代码

调用动画：
                        animation-name: move;
        持续时间：
                        animation-duration: 2s;

2.使用举例

我们来看看这个动画是怎么完成的，首先直接建立一个盒子div，然后为其设置样式，其中有些属性什么意思不懂可以看下面第三节：CSS3动画常见属性

div {width: 100px;height: 100px;background-color: powderblue;animation-name: move;animation-duration: 2s;animation-timing-function: ease;animation-delay: 2s;animation-iteration-count: infinite;animation-fill-mode: forwards;}

三、CSS3动画常见属性

CSS3动画常见属性
属性名称	关键代码	备注
动画名称	annimation-name:动画名称	动画名称自主定义
持续时间	animation-duration：2s	单位是s或者ms
运动曲线	animation-timing-function：ease	无
何时开始	animation-delay: 1s;	单位是s或者ms
重复次数	animation-iteration-count: infinite;	iteration 重复的，conut 次数， infinite 无限
是否反方向播放	animation-direction: alternate;	默认的是 normal 如果想要反方向就写 alternate
动画结束后的状态	animation-fill-mode: forwards;	默认的是 backwards 回到起始状态我们可以让他停留在结束状态 forwards

常用的动画属性这么多，单独使用的话非常的麻烦，我们可以使用简写来使用这些属性，

基本语法如下：

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束状态

animation: name duration timing-function delay iteration-count direction fill-mode;

值得注意的是，前面两个属性name，duration是必要条件，一定要写

简写注意事项：

1.简写属性里面不包含animation-play-state

        2.暂停动画：animation-play-state：paused；经常和鼠标经过等其他配合使用

        3.想要盒子走回来，不是跳回来：animation-direction：alternate

        4.盒子动画结束后，停在结束位置：animation-fill-mode：forwards

四、速度曲线

属性名称	属性值	备注
匀速	linear	无
默认	ease	以低速开始，加快，结束前变慢
以低速开始	ease-in	无
以低速结束	ease-out	无
以低速开始和结束	ease-in-out	无
步长	steps（）	指定了时间函数中的间隔数量

下面使用步长来举一个简单的例子，效果图如下：

步长可以用于模拟电脑打字的效果，一起来看看如何实现的吧。还是建立一个div盒子，

把要输出的文字填入：

<div>模拟电脑打字输入</div>

CSS3代码部分：

首先使用overflow：hidden把没显示的部分隐藏，然后使用animation调用动画w，持续4s，forwards动画停留在结束状态，步长为10，简单来说就是在4s内显示10步以完成动画。

@keyframes w {0% {width: 0;}100% {width: 200px;}}div {overflow: hidden;font-size: 20px;white-space: nowrap;  //不换行width: 0;height: 30px;background-color: pink;animation: w 4s forwards steps(10);}

总结

动画更多的是配个一些2D，3D效果共同使用来达到更好的效果，CSS3的动画相较于JavaScript或者是Flash更加简洁，在编程的过程中，也会少使用软件减轻工作量。

CSS3 高级教程之动画定义和使用相关推荐

css3渐变放大CSS3 教程,css3渐变gradient – CSS3高级教程
CSS3的渐变功能允许你在不使用任何图像的情况下创建从一种颜色到另一种颜色的渐变. 使用CSS3渐变 CSS3的渐变特性提供了一个灵活的解决方案来生成两个或多个颜色之间的平滑过渡.早些时候,为了达到这 ...
Flash ActionScript 3.0 动画高级教程 (高清PDF中文版下载)
Flash ActionScript 3.0 动画高级教程 (高清PDF中文版下载) 转载于:https://www.cnblogs.com/gavinhughhu/archive/2010/09/2 ...
html进度条倒计时代码,html5+css3进度条倒计时动画特效代码【推荐】_html5教程技巧...
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息作者: (美)Brian P. Hogan 译者: 卢俊祥丛书名: 图灵程序设计丛书出版社:人民邮电出版社 ISBN:97871153634 ...
Siki_Unity_2-9_C#高级教程(未完)
Unity 2-9 C#高级教程任务1:字符串和正则表达式任务1-1&1-2:字符串类string System.String类(string为别名) 注:string创建的字符串是不可变 ...
php设计 mobi,PHP程序设计高级教程
PHP程序设计高级教程下载 mobi epub pdf ☆☆☆☆☆ 传智播客高教产品研发部编下载链接在页面底部发表于2021-04-12 类似图书点击查看全场最低价图书介绍出版社: 中国 ...
iText7高级教程之构建基础块——3.使用ILeafElement实现类
作者:CuteXiaoKe 微信公众号:CuteXiaoKe ElementPropertyContainer 类有三个子类:Style.RootElement.和AbstractElement. ...
MPLS *** 高级教程（张洋讲解演示版）
MPLS *** 高级教程(张洋讲解演示版) 课程目标: ü LDP的实施和特性 ü PE-CE路由协议以的实施,以及它们在MPLS ***中的特性: ü 如 ...
2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
DOS批处理高级教程：第三章 FOR命令中的变量(转)
DOS批处理高级教程:第一章批处理基础 DOS批处理高级教程:第二章 DOS循环for命令详解 DOS批处理高级教程:第三章 for命令中的变量 DOS批处理高级教程:第四章批处理中的变量 DOS ...

CSS3 高级教程之动画定义和使用

前言