CSS动画-step()帧动画
Twitter使用了一种新的动画形式,使用一系列的图片来创建帧动画。
下面是一个❤
动画,鼠标移动到上面开始绽放。
.heart {
width: 100px;
height: 100px;
background: url(https://youcanping-1254178049.cos.ap-beijing.myqcloud.com/images/heart.png) no-repeat;
background-position: 0 0;
cursor: pointer;
animation: fave-heart 1s steps(28);
}
.heart:hover {
background-position: -2800px 0;
transition: background 1s steps(28);
}
@keyframes fave-heart {
0% {
background-position: 0 0;
}
100% {
background-position: -2800px 0;
}
}
.fave {
width: 70px;
height: 50px;
background: url(https://youcanping-1254178049.cos.ap-beijing.myqcloud.com/images/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover {
background-position: -3519px 0;
transition: background 1s steps(55);
}
示例教程
鼠标移动到星上显示动画
首先我们要准备一系列构成动画的图片,这里我们使用Twitter收藏夹动画使用的图片集合来制作动画。
下面是动画中要使用的图片集合,为了方便显示,我折行显示。
在实际开发中,我们要把图片放在一行,为了在动画中从第一帧过渡到最后一针,twitter_fave.png 这个文件把图片放在了一行。
step() 计时函数
和大多数的计时函数不同,如ease
何cubic-bezier
,动画是从开始到结束时平滑过渡的,而step()
步骤函数,将动画分为多个步骤(帧),在多个步骤中急剧过渡,来显示动画效果。
1、首先我们创建HTML标签
<section class="fave"></section>
2、添加背景图片样式
.fave {
width: 70px;
height: 50px;
background: url(images/tritter_fave.png) no-repeat
background-position: 0 0; // 图片指针定位左上角
}
3、在hover
状态,鼠标悬浮到图片上,开始切换背景图片
.fave:hover {
background-position: -3519px 0; // 使背景图片相对容器左移,多余背景图片将溢出容器不显示
transition: background 1s step(55); // 步骤为55步,即切换55帧动画
}
这里我们对背景进行切换,时间为1秒,分为55帧。
为什么不用gif
因为gif
的图片更大,占用资源更多,不能控制帧率,而使用CSS动画可以自由控制帧率,可以方便控制动画的暂停、后退或其他适配功能。
step计时函数的其他用途
背景图片精灵只是step()
计时函数的一个使用示例,它还能挖掘出更多的应用场景,如滴答的时钟等。
参考链接
CSS动画-step()帧动画的更多相关文章
- Android动画(一)-视图动画与帧动画
项目中好久没用过动画了,所以关于动画的知识都忘光了.知识总是不用则忘.正好最近的版本要添加比较炫酷的动画效果,所以也借着这个机会,写博客来整理和总结关于动画的一些知识.也方便自己今后的查阅. Andr ...
- Android开发——View动画、帧动画和属性动画详解
0. 前言 Android动画是面试的时候经常被问到的话题.我们都知道Android动画分为三类:View动画.帧动画和属性动画. 先对这三种动画做一个概述: View动画是一种渐进式动画,通过图 ...
- 过渡与动画 - 逐帧动画&steps调速函数
写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...
- uwp 图片切换动画 使用帧动画
上一篇博客使用了Timer来实现图片的切换,@lindexi_gd讨论了一下性能,我本人其实对性能这一方面不太熟,但我觉得还是有必要考虑一下,那么今天我们使用帧动画开实现以下 新建项目,添加一个But ...
- android 学习随笔二十四(动画:帧动画)
帧动画,一张张图片不断的切换,形成动画效果 * 在drawable目录下定义xml文件,子节点为animation-list,在这里定义要显示的图片和每张图片的显示时长 * FrameAnimatio ...
- unity3d 动画卡帧 动画合成 动画层次
2013-02-26 16:22 2059人阅读 评论(0) 收藏 举报 unity3d 中动画的添加 http://unity3d.com/support/documentation/Manua ...
- Android笔记(六十三) android中的动画——逐帧动画( frame-by-frame animation)
就好像演电影一样,播放实现准备好的图片,来实现动画效果. 逐帧动画需要用到AnimationDrawable类,该类主要用于创建一个逐帧动画,然后我们把这个动画设置为view的背景即可. androi ...
- Android补间动画、帧动画和属性动画使用知识介绍
https://blog.csdn.net/zhangqunshuai/article/details/81098062
- 利用css3-animation来制作逐帧动画
前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇.今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animati ...
随机推荐
- Oracle数据库——ROWNUM
Oracle数据库--ROWNUM 前言 刚学到了ROWNUM的用法,网上一搜,结果发现了有很多帖子,写的都很全.本着好记性不如烂笔头的原则,我还是决定自己手打一遍,当然下面也附上了我参考的链接. ...
- IntelliJ IDEA调出problem窗口
一.File =>Settings 二.搜索Compiler=>勾选Make project automatically 三.出现问题Problems窗口会报错 原文地址:https:// ...
- SQL优化中的重要概念:阻塞
原文:SQL优化中的重要概念:阻塞 上一篇讲到锁定的概念,那么接下来就是如何找到由于锁定而发生阻塞的进程,并解决阻塞问题. 1.会话1,修改数据,但没有提交事务 BEGIN TRAN select @ ...
- GDB数据库SQL操作平台
GDB数据库SQL操作平台 开发本软件的初衷:由于计算数据库要素层属性的时候,涉及到要计算多个字段,或者要根据代码计算名称,得一个一个的筛选并计算,过程比较繁琐,于是就想能不能通过像处理SQLServ ...
- 笔记 - C#从头开始构建编译器 - 3
视频与PR:https://github.com/terrajobst/minsk/blob/master/docs/episode-03.md 作者是 Immo Landwerth(https:// ...
- datagrid行内编辑
编辑属性 :editor: { type: 'text'} $('#listShow').datagrid({ height : 478, pagesize : 20, pageList : [20, ...
- LeetCode:626.换座位
题目链接:https://leetcode-cn.com/problems/exchange-seats/ 题目 小美是一所中学的信息科技老师,她有一张 seat 座位表,平时用来储存学生名字和与他们 ...
- 【SQL server】SQL server基础(一)
一.关系型数据库 关系型数据库的基本元素是二维表,这些二维表可以被独立或者通过join语句连接起来使用.主键和外键是用来连接二维表之间的主要工具 1.主键(primary key)和外键(foreig ...
- go语言学习(基本数据类型)
值类型: int/uint :根据系统确定是32还是64位.此外还有int8/uint8.int16/uint16.int32/uint32.int64/uint64 byte:字节型,相当于uint ...
- MySQL主从复制以及在本地环境搭建
MySQL主从复制原理: master(主服务器),slave(从服务器) MySQL master 将数据变更写入二进制日志( binary log, 其中记录叫做二进制日志事binary log ...