css3 动画（三）animation 简介

itvincent 发布于2019-08-29 16:05 / 2466人阅读

摘要：默认，只执行一次动画动画名称，该名称为动画关键帧的名称。默认如何理解表示的是关键帧的名称，那么如何定义关键帧呢使用。语法名称关键帧样式或总结其实也并不复杂，其有个子属性。下一篇动画三源码解析通过阅读动画库的源码，来提高对中属性的认识

前言

上一篇中，总结了一下 transition 以及 cubic-bezier()。本篇中，将介绍 css3 动画中的更为灵活的动画属性：animation。

animation

css3 中的 animation 属性是一系列配置的简写形式，其子属性有：

animation-delay：动画开始时的延迟时间。默认 0s，无延时

animation-direction：动画是否反向播放。默认 normal，表示动画结束之后，回到起点状态

animation-duration：动画时长。默认 0s，无动画

animation-iteration-count：动画重复次数。默认 1，只执行一次动画

animation-name：动画名称，该名称为动画关键帧的名称。默认 none

animation-play-state：动画状态，即是处于播放还是暂停状态。默认 running，为播放状态

animation-timing-function：动画速度。默认 ease

animation-fill-mode：指定在动画执行之前和之后如何给动画的目标应用样式。默认 none 如何理解？

animation-name

animation-name 表示的是关键帧的名称，那么如何定义关键帧呢？使用 @keyframes。

@keyframes

@keyframes 是定义 css3 animation 动画的关键所在。通过定义每一帧的样式状态，比 transition 能更好地控制中间过程。假如说 transition 只能定义 “两帧” 的状态，则 animation 可以定义 “n帧（n >= 2）” 的状态。

语法

“@keyframes + 名称 { // 关键帧样式... }”

@keyframes move {
  from { width: 100px; }
  to { width: 200px; }
}
/* 或 */
@keyframes move {
  0% { width: 100px; }
  100% { width: 200px; }
}

总结

其实 animation 也并不复杂，其有 8 个子属性。

下一篇：css3 动画（三）animation.css 源码解析（通过阅读 animation.css 动画库的源码，来提高对 css3 中 animation 属性的认识）

云服务器 GPU云服务器 css3动画高性能css3动画云机三厂简介 animated

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113513.html

css3 动画（四）animation.css 源码分析

摘要：前言上一篇动画三简介中只是简单的介绍了一下的子属性，并没有真正的使用。在本篇中，通过阅读这个的动画库，来加深对的属性的理解。是一个具有非常多的动画效果的动画库。动画效果演示用法加上基础类以及动画类，就会有闪烁的动画效果。前言上一篇 css3 动画（三）animation 简介中只是简单的介绍了一下 animation 的子属性，并没有真正的使用。在本篇中，通过阅读 animate...

ThreeWords 2019-08-29 16:05 评论0 收藏0
前端动画调研-V1

摘要：支持动画状态的，在动画开始，执行中，结束时提供回调函数支持动画可以自定义贝塞尔曲线任何包含数值的属性都可以设置动画仓库文档演示功能介绍一定程度上，也是一个动画库，适用所有的属性，并且实现的能更方便的实现帧动画，替代复杂的定义方式。动画调研-V1 前言：动画从用途上可以分为两种，一种是展示型的动画，类似于一张GIF图，或者一段视频，另一种就是交互性的动画。这两种都有具体的应用场景，比如...

ddongjian0000 2019-08-23 11:00 评论0 收藏0
css3效果： animate实现点点点loading动画效果（一）

摘要：规定动画完成一个周期所花费的秒或毫秒。等同于贝塞尔曲线平滑过渡。等同于贝塞尔曲线由慢到快再到慢。等同于贝塞尔曲线等同于等同于接受两个参数的步进函数。特定的贝塞尔曲线类型，个数值需在区间内规定动画何时开始。实现如图所示的点点点loading效果：showImg(https://segmentfault.com/img/bVM22d?w=146&h=46); 一：CSS3 animati...

lijy91 2019-08-29 12:30 评论0 收藏0
css3 动画（二）贝塞尔曲线

摘要：根据方程的最高阶数，可以分为线性贝塞尔曲线二次贝塞尔曲线三次贝塞尔曲线以及更高次的贝塞尔曲线。贝塞尔曲线扫盲在中使用的函数，是一个三次贝塞尔曲线函数。三次贝塞尔曲线中四个点，在中第一个点和最后一个点是固定坐标的和是传入函数中的参数的。前言上一篇 css3 动画（一） transition 中，介绍了 transition 的用法。其中 transition 包含四个可设置的属性： ...

soasme 2019-08-30 15:54 评论0 收藏0
CSS3-Animotion抽丝剥茧一步步撸出跑男动画

摘要：通过剖析一个跑男动画实例，来把中动画相关的知识点抽丝剥茧，一网打尽。跑男的动画其实可以拆分为两个一个是交替摆腿另一个是位置移动。在使用改变雪碧图时，得到效果这样的平滑过度显然不是我们想要的。所以，在切换雪碧图背景的方案下，就要派上用场了。作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟水银泄地般的页面设计和炫酷逼真的动画效果，是我们区别于其他程序员所特有的优势之一。尽量百...

caoym 2019-08-21 11:39 评论0 收藏0