文章目录

html5的动画（animation）
- 动画的定义（@keyframes（关键帧））
- 动画的调用（使用）
- animation-iteration-count（动画执行的次数）
- animation-direction(动画执行的方向）
- animation-play-state（动画的执行状态）
- animation-fill-mode（动画的填充模式）
- animation的简写

html5的动画（animation）

animation（动画）和transition（过渡）其实差不多，就是一个自己会动（动画），一个需要触发才可以动。

然后动画是需要定义的，像函数一样，过渡则不用，过渡是直接写在某标签或者类名等的样式中即可。那么动画要怎么定义呢？

动画的定义（@keyframes（关键帧））

设置动画效果，必须要先设置一个关键帧，关键帧设置了动画的每一个步骤，最简单的关键帧的定义如下：(定义在css文件或者在style标签中，moveToRight是自己取的名字，类似于我们的函数名，需要被调用）

        @keyframes moveToRight {from{margin-left: 0%;}to{margin-left: 100%;}}

动画的调用（使用）

只需要使用animation-name:关键帧名；来使用即可。

animation也可以使用

animation-duration定义动画时间，
animation-delay设置延迟时间，
animation-timing-function设置动画的时序函数

注意：动画不需要指定动画的属性，可以直接让他过渡。
演示代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画</title><style>.box1{width: 600px;height: 600px;background-color: grey;overflow: hidden;}.box2{width: 100px;height: 100px;background-color: orange;animation-name: moveToRight;animation-duration: 2s;}@keyframes moveToRight {from{margin-left: 0%;}to{margin-left: 100%;}}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

显示：（自动滑动，因为设置了100%，所以会直接滑动到外边，然后被overflow:hidden所隐藏，第二张图被我眼疾手快截了一点尾巴，只是为了单纯证明我的手速）

除此之外，动画还有其他的属性，详见下面内容！！！

animation-iteration-count（动画执行的次数）

可选值：

N（常数，执行N次）
inifinite（无数次）

animation-direction(动画执行的方向）

可选值：

normal：每次从from到to（默认）
reverse：每次都从to到from
alternate：先from到to，然后再从to到from 反复
alternate-reverse：从to到from，然后再从from到to 反复

animation-play-state（动画的执行状态）

可选值：

running：动画执行（默认）
paused：动画暂停

animation-fill-mode（动画的填充模式）

可选值：

none：动画执行完毕回到原来位置（默认）
forward：动画执行完毕，停止在动画结束的位置
backwards：动画延时等待时，元素会处于开始位置
both：结合了forward和backwards。

animation的简写

         /*关键帧名为moveToRight*/animation-name: moveToRight;/*每次运动时常为2s*/animation-duration: 2s;/*移动三次*/animation-iteration-count: 3;/*延迟2s*/animation-delay: 2s;/*运动方向先from到to，然后再从to到from 反复*/animation-direction: alternate;/*动画执行完毕，停止在动画结束的位置*/animation-fill-mode: forwards;

可以简写为：

            animation: moveToRight 2s infinite 2s alternate forward;

39.html5的动画（animation）相关推荐

HTML5 CSS动画 animation使用
首先看一下页面的布局 <body><div class="box1"><div class="box2"></div& ...
十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列
HTML5 第二天一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
html5 渐变动画效果图,html5+css3城市场景动画_觉唯设计
最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现.在上一篇文章<盛开的CSS3梦幻荷花>中提到如何用css3制作丰富动画效果的两个思路,当然除此之外,结合使用javascrip ...
html流程svg动画,html5 svg动画
以上是svg的一个线上编辑器,也可以adobe Illustrator制作生成. 我们通过以上编辑器可以获得以下代码. 例: Layer 1 给路径path 添加 class 为 path1 .pat ...
HTML5实现动画三种方式
HTML5实现动画三种方式编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是Canvas,还有css3和javascript.通过合理的选择,来实现最优的 ...
android 三维动画效果,9款令人惊叹的HTML5 3D动画应用
原标题:9款令人惊叹的HTML5 3D动画应用之前我们已经向大家分享了很多HTML5动画应用了,大部分都非常炫酷,也有一小部分是很实用的.今天我们要向各位HTML5动画爱好者介绍更多的HTML5 3 ...
精灵动画Animation对话框组成Idle动画的各精灵
精灵动画Animation对话框组成Idle动画的各精灵场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状态:Idle(空闲) ...
HTML5 Canvas动画效果实现原理
在线演示使用HTML5画布能够帮助我们快速实现简单的动画效果,基本原理如下: 每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearRect(0, 0, x, ...
css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...

39.html5的动画（animation）

文章目录

html5的动画（animation）

动画的定义（@keyframes（关键帧））

动画的调用（使用）

animation-iteration-count（动画执行的次数）

animation-direction(动画执行的方向）

animation-play-state（动画的执行状态）

animation-fill-mode（动画的填充模式）

animation的简写

39.html5的动画（animation）相关推荐

最新文章

热门文章