目录

前言

一、keyframes定义动画

二、元素使用动画

1.关键代码

2.使用举例

三、CSS3动画常见属性

?四、速度曲线

总结

---

前言?

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更加简洁，在编程的过程中，也会少使用软件减轻工作量。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。