@keyframes详解与实例
转自文章 https://segmentfault.com/a/1190000004460780#articleHeader5
一、transform
和@keyframes
动画的区别:
@keyframes
动画是循环的,而transform
只执行一遍.
二、@keyframes
CSS3中添加的新属性animation
是用来为元素实现动画效果的,但是animation
无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes
。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-
等前缀以适应不同的浏览器。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
通过 @keyframes 规则,您能够创建动画。
@keyframes定义一个动画,并定义具体的动画效果,比如是放大还是位移等等。
@keyframes 它定义的动画并不直接执行,需要借助animation来运转。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
百分比是指动画完成一遍的时间长度的的百分比 ,0% 是动画的开始时间,50%是动画完成一半的时间,100% 动画的结束时间。百分比后面的花括号写:在动画执行过程中的某时间点要完成的变化。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
语法
@keyframes animationname {keyframes-selector {css-styles;}}
值 | 描述 |
---|---|
animationname | 必需。定义动画的名称。 |
keyframes-selector |
必需。定义动画的名称。 合法的值: 1. 0-100% 2. from(与 0% 相同) 3. to(与 100% 相同) |
css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
例子1:
名字为
gif
的@keyframes
,动画完成需要的总时长为1.4s
,刚开始的时候图片旋转为0度,动画完成的时候图片旋转360度
.load-border {width: 120px;height: 120px;background: url(../images/loading_icon.png) no-repeat center center;-webkit-animation: gif 1.4s infinite linear;animation: gif 1.4s infinite linear;
}
@keyframes gif {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
例子2:
名字为
mymove
的@keyframes
,动画完成需要的总时长为1s
,刚开始的时候图片距顶部距离为0px
,0.25s
后图片距顶部距离为200px
,0.5s
后图片距顶部的距离为100px
,以此类推
.img {width: 120px;height: 120px;background: url(../images/icon.png) no-repeat center center;-webkit-animation: gif 1.4s infinite linear;animation: mymove 1s infinite linear;
}
@keyframes mymove
{0% {top:0px;}25% {top:200px;}50% {top:100px;}75% {top:200px;}100% {top:0px;}
}
例子3:
在一个动画中改变多个 CSS 样式:
@keyframes mymove
{0% {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}
}
@keyframes详解与实例相关推荐
- OCR引擎Tesseract以及pytesseract详解及实例
OCR引擎Tesseract以及pytesseract详解及实例 目录 OCR引擎Tesseract以及pytesseract详解及实例 谷歌开源OCR引擎Tesseract Tesseract的安装 ...
- pandas dataframe缺失值(np.nan)处理:识别缺失情况、删除、0值填补、均值填补、中位数填补、加缺失标签、插值填充详解及实例
pandas dataframe缺失值(np.nan)处理:识别缺失情况.删除.0值填补.均值填补.中位数填补.加缺失标签.插值填充详解及实例 isnull().natna().isna().fill ...
- pandas dataframe数据聚合groupby、agg、privot基于sum统计详解及实例
pandas dataframe数据聚合groupby.agg.privot基于sum统计详解及实例 知道了sum.那么min.max.mean.median都是举一反三的事情了. 在日常的数据分析中 ...
- pandas数据索引之loc、iloc、ix详解及实例
pandas数据索引之loc.iloc.ix详解及实例 先来个总结: loc函数:通过行索引 "Index" 中的具体值来取行数据(如取"Index"为&quo ...
- python中递归函数的实例_Python 递归函数详解及实例
Python 递归函数 如果一个函数体直接或者间接调用自己,那么这个函数就称为递归函数.也就是说,递归函数体的执行过程中可能会返回去再次调用该函数.在python里,递归函数不需要任何特殊的语法,但是 ...
- jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的 ...
- java拉姆达表达式事例,Java Lambda表达式详解和实例
简介 Lambda表达式是Java SE 8中一个重要的新特性.lambda表达式允许你通过表达式来代替功能接口. lambda表达式就和方法一样,它提供了一个正常的参数列表和一个使用这些参数的主体( ...
- python随机数程序源码_Python 实现随机数详解及实例代码
Python3实现随机数 random是用于生成随机数的,我们可以利用它随机生成数字或者选择字符串. random.seed(x)改变随机数生成器的种子seed. 一般不必特别去设定seed,Pyth ...
- java super实例_java Super 用法详解及实例代码
java Super 用法详解及实例代码 发布于 2021-1-8| 复制链接 摘记: java Super 用法详解 1)有人写了个很好的初始化属性的构造函数,而你仅仅想要在其中添加另一些自己新建 ...
最新文章
- 数据密集型应用系统设计 [Designing Data-Intensive Applications]
- java应用:csv文件的读写
- shell脚本实战 pdf_Shell脚本实战:日志关键字监控+自动告警
- python处理完数据导入数据库_python操作数据库之批量导入
- [转]正确配置Linux系统ulimit值的方法
- 【PAT甲级 十进制转十三进制】1027 Colors in Mars (20 分) Java版 5/5通过
- superset中的json数据转csv
- 深入 JavaScript(4) - new运算符是如何工作的
- random模块 时间模块 sys模块 os模块 json模块 pickle模块
- map分组后取前10个_hive中分组取前N个值的实现
- 多线程总结之旅(1):线程VS进程
- mysql 5.5.32备份数据库_十六、mysql的备份与恢复(二)--mysqldump
- linux 列出指定目录下所有文件的 列表集合
- weblogic部署静态网页
- 微信windows版_微信Windows版更新3.0:小程序可添加至桌面
- 【AI视野·今日CV 计算机视觉论文速览 第154期】Wed, 4 Sep 2019
- 大数据三驾马车,第一个上市的Hortonworks要翻车了?
- 我数星星...宝宝,你智商差点,就数月亮吧
- python tkinter手册_tkinter 中文文档
- js字符串转数字(数字转字符串)