html keyframes无效,CSS3 中的@keyframes介绍
语法
@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需。定义动画的名称。
keyframes-selector
必需。动画时长的百分比。
合法的值:
0-100%
from(与 0% 相同)
to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。
定义和用法
通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。
目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
例:
复制代码代码如下:
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
注释:本例在 Internet Explorer 中无效。
html keyframes无效,CSS3 中的@keyframes介绍相关推荐
- css3中的 @Keyframes
一.介绍 keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面跟着是动画名称加上一对花括号"{-}&quo ...
- html keyframes无效,sass中@keyframes后变量无效的问题
定义动画用@keyframes,为了保证兼容性,通常在sass中会写成javascript @mixin keyframes($a) { @-webkit-keyframes $a { @conten ...
- html 滤镜兼容,CSS3 中各种滤镜介绍和兼容性说明 - 文章教程
CSS3 的过滤器是一种相当有趣的分支,允许您修改的 HTML 元素和图像模糊.亮度和更大量.在这个快速教程中,我们就去了解他们是如何去工作. 它是如何工作 只需使用 CSS,我们可以完成一些相当复杂 ...
- CSS3 动画关键帧 @keyframes
在CSS3中,通过 animation 属性来定义动画.虽然 transition 也可以实现从一种状态到另一种状态的动画效果,但它只能控制开始和结束的两个点,功能非常有限.而 animation 除 ...
- CSS3中的2D和3D转换知识介绍
一 2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...
- css3动画与@keyframes关键帧
Css3动画与@keyframes关键帧 开发工具与关键技术:DW 作者:黄金燕 年级: 1805 撰写时间: 2019年2月21日 在一个"@keyframes"中的样式规则可以 ...
- css3 keyframes 取消动画,为什么我的CSS3动画使用@keyframes在每个百分比范围内停止几毫秒?...
我想制作一个帆船动画.它有效,但它不是一个流畅的动画.它停止在我在@keyframes中做出的每个更改中.我正在使用transform:rotate(-5deg),然后更改为5deg以模拟波浪效果,同 ...
- html keyframes无效,CSS Module解决全局或本地使用@keyframes无效问题
最近使用CSSModule开发react项目,遇到一个问题,使用@keyframes无效,问题如下 /** less + css module **/ :global { .effect-bottom ...
- 简单介绍CSS3中的transform的使用方法
一,转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,缩放等效果.分为两种转换,分别是2D以及3D转换效果. 转换可以简单理解为的变形,其主要效果有三种: 移动:t ...
最新文章
- TextBox控件怎样赋值化学符号
- UVA-1 #1. A + B Problem
- matlab频谱分析_罗德与施瓦茨两款新的信号和频谱分析仪 具有多种频率型号
- DELL服务器如何使用iDRAC安装操作系统
- python安装详细步骤mac_Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
- Android实现选择题答题(包括单选、多选和答题卡)
- if...else 语句双分支结构 计算分段函数
- 计算机硬盘存贮量单位,硬盘存储计量单位KB、MB、GB大小换算
- VHDL 仿真出现 UUUUUUUU 红线
- 黑苹果 惠普笔记本电池补丁_惠普笔记本电池无法充电问题的解决方法
- JavaScript下的setTimeout(fn,0)的作用,涨知识了
- 计算机Excel设置透视图,电脑Excel表格中数据透视图怎么制作
- 快速学习四步法:如何用20小时,快速学习?
- Unity 之 ShaderGraph Channel节点解析汇总
- C语言 加减乘除运算
- 移动硬盘一直不能正常读取
- 小米手环7添加校园卡(门禁)
- 《CSS禅意花园》翻译完成 Dflying又回来了!
- win10 浏览器不能上网但是QQ等其他软件都能上网
- 警告:不能读取 AppletViewer 的属性文件