CSS3 动画关键帧 @keyframes
在CSS3中,通过 animation 属性来定义动画。虽然 transition 也可以实现从一种状态到另一种状态的动画效果,但它只能控制开始和结束的两个点,功能非常有限。而 animation 除了能控制开始和结束的两个点外,还能通过关键帧来控制动画的每一步,可以实现更为复杂的动画效果。
CSS3中,animation 实现的动画由两个部分组成:首先,使用关键帧 @keyframes 来声明一个动画;然后,在 animation属性中,调用关键帧声明的动画。
简单的说,就是在 keyframes 中定义动画效果,再由 animation 的相关属性来控制动画的播放,接下来分别进行介绍。
关键帧
在CSS3中,把 @keyframes 称作关键帧,并使用 @keyframes 来定义动画每一帧的效果,即定义由当前样式逐渐改变为新样式的动画效果。
@keyframes 有自己的语法规则,它由 @keyframes 开头,后面紧跟动画名称和一对大括号,在大括号中定义每个帧的样式规则:
@keyframes <identifier> {
<keyframes-blocks>
}
identifier 表示动画的名称,它将被动画的 animation-name 属性引用,来实现动画和元素的关联。动画可以使用任何名称,但考虑到动画可以在多个元素上复用,尽量取一个合理的、能望文生义的名称。
keyframes-blocks 定义动画每个帧的样式规则,样式规则是由多个百分比构成,在每个百分比中定义该帧的样式规则,从而实现从一种状态到另一种状态的动画效果。样式规则中的百分比,可以看做是每一帧在动画时间轴上的位置,0% 为时间轴的起点,100% 为时间轴的终点。
由此可知,使用 @keyframes 声明一个动画的语法规则为:外,在声明关键帧时,0% 可以用 from 代替,100% 可以用 to 代替。如:
@keyframes <identifier> {
from {
/* CSS样式 */
}
percentage {
/* CSS样式 */
}
to {
/* CSS样式 */
}
}
接下来,看看一个由W3C提供的实例:
@keyframes wobble {
0% {
left: 100px;
}
40% {
left: 150px;
}
60% {
left: 75px;
}
100% {
left: 100px;
}
}
上述代码定义了一个名称为 wobble 的动画,它从 0% 开始,到 100% 结束,中间还经历了40% 和 60% 两个过程。也就是说,名称为 wobble 的动画共有四个关键帧,来实现以下动画效果:
1)在0%(第一帧)时,元素的定位到 left 为100px 的位置;
2)在40%(第二帧)时,元素的过渡到 left 为150px 的位置;
3)在60%(第三帧)时,元素的过渡到 left 为75px 的位置;
4)在100%(第四帧)时,元素的又回到 left 为100px 的起点位置。
假设让这个动画执行 10 秒钟,每一阶段的执行状态如图 8‑16 所示:
图8-16 动画的执行状态
事实上,关键帧的写法相当自由,它不必以 0% 开始、100% 结束,也可以省略某个中间状态,浏览器会自动推算,进行平滑播放。就连关键帧的声明顺序,也可以随意书写,因为播放动画上,关键帧的顺序是由百分比决定,而不是由声明顺序决定。还可以将多个状态写在一起,如from,to { transform: none; },它就表示 from 和 to 这两个关键帧应用了相同的样式。
但需要注意的是,不能省略百分比中的百分号,即 0% 不能写成 0,100% 也不能写成1。否则,将导致整个动画的声明无效,不会产生动画效果。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
CSS3 动画关键帧 @keyframes相关推荐
- css3动画与@keyframes关键帧
Css3动画与@keyframes关键帧 开发工具与关键技术:DW 作者:黄金燕 年级: 1805 撰写时间: 2019年2月21日 在一个"@keyframes"中的样式规则可以 ...
- css3 keyframes 取消动画,为什么我的CSS3动画使用@keyframes在每个百分比范围内停止几毫秒?...
我想制作一个帆船动画.它有效,但它不是一个流畅的动画.它停止在我在@keyframes中做出的每个更改中.我正在使用transform:rotate(-5deg),然后更改为5deg以模拟波浪效果,同 ...
- html vw自动跳到ie,CSS3动画/关键帧,在IE11问题中使用vw进行转换
我在屏幕上制作一个元素,但在IE11中,奇怪的事情正在发生.我正在开发中,所以我无法分享实时代码.但我创造了一个小提琴来复制这个问题. 基本上,当我使用视口宽度aka vw与transform:tra ...
- CSS3 animation 关键帧动画 keyframes
animation 基本用法 语法格式: animation: name duration timing-function delay iteration-count direction; 第一个参数 ...
- html如何创建关键帧动画旋转,[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画...
通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧). 我们要做什么? 下面是最终代码,也就是我们将要最终实现的演示: 基础准备 对于这个实现,我们需要一个简 ...
- 在html5中关键帧属性的描述,CSS动画属性关键帧keyframes全解析
大概有多久没有更新专栏文章了.半年?下半年忙到起飞,或者毫不夸张的说是发射?仅有的一点个人时间,上半年贡献给了Python,现在差不多已忘掉了七七八八(一首<凉凉>送给自己),下半年贡献给 ...
- CSS3 动画专栏:@keyframes与animation的恋曲
目录 0. CSS3的基础模型 1. transform:---()实现元素的自由变换 2. 让我们的元素动起来吧! 2.1 CSS3 @keyframes 规则 2.1.1@keyframes ...
- 关键帧动画html例子,关键帧 | @keyframes
关键帧 | @keyframes 在CSS中,@keyframes根据你定义的样式规则来更有效的控制动画队列中的每一个中间步骤(或者每一个路径点).用@keyframes来制定动画规则会比使用tran ...
- 使用css3的动画属性@keyframes创建小说轮播图
最近一直在琢磨做一个小说网站模板,在寻找灵感时发现一个很好的小说展示效果-小说三维轮播,如下图所示: 这种小说轮播展示方法不仅美观而且节省页面空间,那么他到底怎么实现的呢?由于本人是一个小白,所以去网 ...
最新文章
- node.js path
- usockets / 编译 usockets 过程说明
- python商城源码_腾讯大佬用了12小时讲完的Python,整整400集,拿走不谢
- JAVA入门级教学之(内存引用的例子)
- P2216 [HAOI2007]理想的正方形
- 【Java】在eclipse中使用maven进行项目构建 入门篇
- 我年龄大了还学的动it吗
- 一步一步利用django创建博客应用(三)
- 十五. 项目沟通管理
- Unity 游戏实例开发集合 之 JumpJump (简单跳一跳) 休闲小游戏快速实现
- 幸福加油站(EAP)——忙碌的心里意义
- 综合架构——网站服务
- 02_基于西门子CM1241的ModbusRTU串口通讯实现
- 「我的microNome组学分析流程」第1版
- 【高德地图API】从零开始学高德JS API(五)路线规划——驾车|公交|步行
- 一文搞懂“正态分布”所有重要知识点
- golang-math实用小技巧
- 2021年3月20日美团笔试
- 微信公众平台-openid获取
- 实验3、顺序与选择结构
热门文章
- Smokeping的参数使用说明
- Spring Data JPA简单学习
- 【gateway系列】手把手教你gateway整合nacos注册中心
- volatile关键字的用法
- java开源播放器_JavaFX/Java8开发的开源音乐播放器
- 数据库水平切分(MyCat分片)
- 什么情况下需要创建MySQL索引
- python接口自动化22-签名(signature)鉴权(authentication)之加密(HEX、MD5、HMAC-SHA256)...
- Android 架构艺术之MVP
- 循序渐进Python3(十二) --2-- web框架之django简单实现oracle数据库操作