CSS3的@keyframes用法详解:

原文出处: http://www.cnblogs.com/zuihongyan/p/5902541.html

CSS3的@keyframes用法详解:
此属性与animation属性是密切相关的，关于animation属性可以参阅CSS3的animation属性用法详解一章节。

一.基本知识:
keyframes翻译成中文，是"关键帧"的意思，如果用过flash应该对这个比较好理解，当然不会flash也没有任何问题。
使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。

语法结构:

@keyframes animationname {keyframes-selector {css-styles;}}

参数解析:
1.animationname:声明动画的名称。
2.keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。
"from" 和 "to"的形式等价于 0% 和 100%。
建议始终使用百分比形式。

二.代码实例:

实例一:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{ width:100px; height:100px; background:red; position:relative; animation:theanimation 5s infinite alternate; -webkit-animation:theanimation 5s infinite alternate ; -moz-animation:theanimation 5s infinite alternate ; -o-animation:theanimation 5s infinite alternate ; -ms-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{ from {left:0px;} to {left:200px;}
}
@-webkit-keyframes theanimation{ from {left:0px;} to {left:200px;}
}
@-moz-keyframes theanimation{ from {left:0px;} to {left:200px;}
}
@-o-keyframes theanimation{ from {left:0px;} to {left:200px;}
}
@-ms-keyframes theanimation{ from {left:0px;} to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面代码实现了简单的动画，下面简单做一下分析:
1.使用@keyframes定义了一个名为theanimation的动画。
2.@keyframes声明的动画名称要和animation配合使用。
3.from to等价于0%-100%，所以就是规定5s内做了一件事情。

实例二:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{ width:100px; height:100px; background:red; position:relative; animation:theanimation 4s infinite alternate; -webkit-animation:theanimation 4s infinite alternate ; -moz-animation:theanimation 4s infinite alternate ; -o-animation:theanimation 4s infinite alternate ; -ms-animation:theanimation 4s infinite alternate ;
}
@keyframes theanimation{ 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 theanimation{ 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 theanimation{ 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 theanimation{ 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;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

在以上代码中，使用百分比形式将动画时长进行了划分，规定了在指定区间内做指定的事情。

CSS3的@keyframes用法详解:相关推荐

html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
CSS3: 线性渐变用法详解
前言演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv {width:400px;height:400px;border:1p ...
CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
css3 fieldset,生僻标签 fieldset 与 legend 的用法详解
谈到与,大部分人肯定会比较陌生,在 HTML 标签中,属于比较少用的那一批. 我最早知道这两个标签,是在早年学习 reset.css 或者 normalize.css 时,在这些重置统一代码默认样式 ...
CSS3中font-face属性的用法详解
CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕 ...
HTML动画XYZ轴的用法详解
HTML动画XYZ轴的用法详解我将通过创建一个旋转的正方体讲解H5 xyz轴的具体用法首先定义一个盒子,盒子内先放一张平面(后面会根据这张平面弄出六个面使其成为一个正方体) 复制并打开代码你会看 ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
CSS3动画属性 animation详解（看完就会）
CSS3动画属性 animation 文章包含个人理解错误请指出往期文章 [css高级]变量详解轮播图swiper框架的基本使用 [Transform3D]转换详解(看完就会) [css动画] ...
python argv 详解_Python3 sys.argv[ ]用法详解
sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个"外部"很关键,因为我们从外部取得的参数可以是多个,所以获得的是一个列表(list),也就是说sys.argv其实可 ...

CSS3的@keyframes用法详解:

CSS3的@keyframes用法详解:相关推荐

最新文章

热门文章