深入浅出 CSS 动画
关注公众号 前端开发博客，领27本电子书
回复加群，自助秒进前端群
本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。
CSS 动画介绍及语法
首先，我们来简单介绍一下 CSS 动画。
最新版本的 CSS 动画由规范 -- CSS Animations Level 1[1] 定义。
CSS 动画用于实现元素从一个 CSS 样式配置转换到另一个 CSS 样式配置。
动画包括两个部分: 描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
简单来说，看下面的例子：
div {animation: change 3s;
}@keyframes change {0% {color: #f00;}100% {color: #000;}
}animation: move 1s部分就是动画的第一部分，用于描述动画的各个规则;@keyframes move {}部分就是动画的第二部分，用于指定动画开始、结束以及中间点样式的关键帧;
一个 CSS 动画一定要由上述两部分组成。
CSS 动画的语法
接下来，我们简单看看 CSS 动画的语法。
创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现。
animation 的子属性有：
animation-name：指定由 @keyframes 描述的关键帧名称。
animation-duration：设置动画一个周期的时长。
animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
animation-iteration-count：设置动画重复次数， 可以指定 infinite 无限次重复动画
animation-play-state：允许暂停和恢复动画。
animation-timing-function：设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
animation-fill-mode：指定动画执行前后如何为目标元素应用样式
@keyframes 规则，当然，一个动画想要运行，还应该包括 @keyframes 规则，在内部设定动画关键帧
其中，对于一个动画：
必须项：
animation-name、animation-duration和@keyframes规则非必须项：
animation-delay、animation-direction、animation-iteration-count、animation-play-state、animation-timing-function、animation-fill-mode，当然不是说它们不重要，只是不设置时，它们都有默认值
上面已经给了一个简单的 DEMO， 就用上述的 DEMO，看看结果：
这就是一个最基本的 CSS 动画，本文将从 animation 的各个子属性入手，探究 CSS 动画的方方面面。
animation-name / animation-duration 详解
整体而言，单个的 animation-name 和 animation-duration 没有太多的技巧，非常好理解，放在一起。
首先介绍一下 animation-name，通过 animation-name，CSS 引擎将会找到对应的 @keyframes 规则。
当然，它和 CSS 规则命名一样，也存在一些骚操作。譬如，他是支持 emoji 表情的，所以代码中的 animation-name 命名也可以这样写：
div {animation:
深入浅出 CSS 动画相关推荐
- CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
- 【译】CSS动画 vs JS动画
原文地址 目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...
- Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
- 前端技术周刊 2019-01-07：CSS 动画
2019-01-07 前端快爆 Chrome 72 已经进入了 beta 阶段.新增:公有类成员的声明和初始化.一些 DevTools 新功能(可视化性能指标.高亮 text nodes.复制节点的 ...
- 超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示 本地下载 通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- 动画延迟效果css,每个子元素都有延迟的CSS动画
每个子元素都有延迟的CSS动画 我试图通过将动画应用于每个子元素来创建级联效果. 我想知道是否有比这更好的方法: .myClass img:nth-child(1){ -webkit-animatio ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- html和css制作动漫岛,CSS动画
transition 早期要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, ...
- html5监听动画结束,js判断css动画是否完成 animation,transition
气死了,发现这些鸟人讲事情都讲一半,害死初学者. css动画有两种,animation,transition,所以分开来讲. 1.animation: css定义 #left1{} html定义: 安 ...
最新文章
- Java项目:房屋租赁系统设计和实现(java+ssm+mysql+spring+jsp)
- 我的LDAP使用手记(Fedora-ds) 备忘用
- 美团面试：JVM 堆内存溢出后，其他线程是否可继续工作？
- PL/SQL表---table()函数用法
- 播客“日谈公园”完成数百万天使轮融资，来自头头是道基金
- java web开发中会遇到的异步执行方案
- python classmethod 与 staticmethod
- 动软代码生成器连不上高版本（8.0+）的解决方法
- python可以下载百度文库_用python下载百度文库的代码
- 用计算机修改图片或照片,【如何更改图片像素】电脑上如何改照片像素
- java怎么绘画坦克_java绘图,画坦克
- SAR/GMTI-概述及常用抑制杂波方法DPCA
- TStack运维笔记（04）- 配置VPC网络及告警设置
- Android之APP跳转到权限设置界面适配华为、小米、vivo等
- Echarts中迁徙图，设置点和航线的不同颜色
- 微信群裂变引流文案技巧，这样写文案更吸引粉丝!
- Mogafx英美对有望结束连续两日的跌势
- 上下边距html样式表,css上下间距怎么调？
- python手机号码正确编程_Python。弄清楚如何输入正确的电话号码
- 伪类选择器：checked
热门文章