本文摘自PHP中文网,作者青灯夜游,侵删。
使用css3中的“@keyframes”规则来定义动画。“@keyframes”规则用于指定动画规则,定义一个CSS动画的一个周期的行为,可以创建简单的动画;可通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
@keyframes是CSS3的一种规则,可以用来定义CSS动画的一个周期的行为,可以创建简单的动画。
动画与转换类似,因为它们都是随时间改变CSS属性的表示值。主要区别在于,当属性值更改时(例如,当悬停时属性值发生改变时),转换会隐式的触发,但在应用动画属性时会显式执行动画。因此,动画需要显示动画属性的显式值。这些值是在@keyframes规则中指定的动画关键帧定义的。因此,@keyframes规则里是由一组封装的CSS样式规则组成的,这些规则描述了属性值如何随时间变化。
然后,使用不同的CSS animation(动画)属性,可以控制动画的许多不同方面,包括动画迭代的次数,是否在开始和结束值之间交替,以及动画是否应该运行或暂停。动画也可以延迟其开始时间。
@keyframe规则由关键字“@keyframe”组成,后面接着是给出动画名称的标识符(将使用animation-name引用),随后是通过一组样式规则(用大括号分隔)。然后,通过使用标识符作为animation-name属性的值,将动画应用于元素。
语法:
1 | @keyframes animation-name {keyframes-selector {css-styles;}}
|
1 2 3 4 5 6 7 8 9 10 | @keyframes your-animation-name {
}
.element {
animation-name: your-animation-name;
animation: your-animation-name 1s ...
}
|
在大括号内,定义关键帧或路径点,这些关键帧或路径点在动画期间的某些点上指定要设置动画的属性的值。这允许您在动画序列中控制中间步骤。例如,一个简单的动画@keyframe可能如下所示:
1 2 3 4 5 6 7 8 | @keyframes change-bg-color {
0% {
background-color : red ;
}
100% {
background-color : blue ;
}
}
|
0%”和“100%”是关键帧选择器,每个都定义了关键帧规则。关键帧规则的关键帧声明块由属性和值组成。
还可以使用选择器关键字from和to,而不是分别使用0%和100%,因为它们是等价的。
1 2 3 4 5 6 7 8 | @keyframes change-bg-color {
from {
background-color : red ;
}
to {
background-color : blue ;
}
}
|
关键帧选择器由一个或多个逗号分隔的百分比值或from和to关键字组成。注意,百分比单位说明符必须用于百分比值。因此,' 0 '是一个无效的关键帧选择器。(学习视频分享:css视频教程)
注意:为了获得浏览器的最佳支持,请始终指定0%和100%选择器。
css @keyframes的使用示例:
1、定义动画发生的空间
HTML代码:
1 2 3 | < div class = "container" >
< div class = "element" ></ div >
</ div >
|
2、使用@keyframes规则创建简单动画
css代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | body {
background-color : #fff ;
color : #555 ;
font-size : 1.1em ;
font-family : 'Helvetica Neue' , Helvetica , Arial , sans-serif ;
}
.container {
margin : 50px auto ;
min-width : 320px ;
max-width : 500px ;
}
.element {
margin : 0 auto ;
width : 100px ;
height : 100px ;
background-color : #0099cc ;
border-radius: 50% ;
position : relative ;
top : 0 ;
-webkit-animation: bounce 2 s infinite;
animation: bounce 2 s infinite;
}
@-webkit-keyframes bounce {
from {
top : 100px ;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
top : 50px ;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
top : 150px ;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
top : 75px ;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
top : 100px ;
}
}
@keyframes bounce {
from {
top : 100px ;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
top : 50px ;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
top : 150px ;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
top : 75px ;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
top : 100px ;
}
}
|
3、运行效果
更多编程相关知识,请访问:编程视频!!
以上就是使用css3中的什么规则来定义动画的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css计数器(counter)是什么
css nth-of-type和nth-child的区别是什么?
CSS3如何实现颜色渐变效果
h5和CSS3制作一个相册的代码实例
CSS3跟css区别是什么
CSS3动画不循环怎么办
CSS3 简介
CSS3动画属性有哪些
CSS3 nav-right属性怎么用?
CSS3如何实现图片木桶布局?(附代码)
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 使用css3中的什么规则来定义动画