css中关键帧有什么用

这篇文章将为大家详细讲解有关css中关键帧有什么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

css,关键帧是CSS3的一种规则,可以用来定义css动画的一个周期的行为,可以创建简单的动画;关键帧规则由关键字“@keyframe”组成,后面接着是给出动画名称的标识符。

<强> css @keyframes是什么?有什么用?

@keyframes是CSS3的一种规则,可以用来定义css动画的一个周期的行为,可以创建简单的动画。

动画与转换类似,因为它们都是随时间改变css属性的表示值。主要区别在于,当属性值更改时(例如,当悬停时属性值发生改变时),转换会隐式的触发,但在应用动画属性时会显式执行动画,因此,动画需要显示动画属性的显式值。这些值是在@keyframes规则中指定的动画关键帧定义的,因此,@keyframes规则里是由一组封装的css样式规则组成的,这些规则描述了属性值如何随时间变化。

然后,使用不同的css动画(动画)属性,可以控制动画的许多不同方面,包括动画迭代的次数,是否在开始和结束值之间交替,以及动画是否应该运行或暂停。动画也可以延迟其开始时间。

@keyframe规则由关键字“@keyframe”组成,后面接着是给出动画名称的标识符(将使用animation-name引用),随后是通过一组样式规则(用大括号分隔),然后,通过使用标识符作为animation-name属性的值,将动画应用于元素。

css @keyframes的使用示例:

1,定义动画发生的空间

HTML代码:

& lt; div 类=癱ontainer"比; 　　& lt;才能div 类=癳lement"祝辞& lt;/div> 　　& lt;/div>

2,使用@keyframes规则创建简单动画

css代码

body  { 　　,,背景颜色:# fff; 　　,,颜色:# 555; 　　,,字体大小:1.1 em; 　　,,字体类型:& # 39;Helvetica 欧元区# 39;,,Helvetica,, Arial,,无衬线; 　　} 　　.container  { 　　保证金才能:50 px 汽车; 　　,,min-width: 320 px; 　　,,max-width: 500 px; 　　} 　　.element  { 　　保证金才能:0,汽车; 　　,,宽度:100 px; 　　,,身高:100 px; 　　,,背景颜色:# 0099 cc的; 　　,,这个特性:50%; 　　位置:,才能相对; 　　,,:0; 　　,,-webkit-animation: bounce  2 s 无限; 　　动画:才能,bounce  2 s 无限; 　　} 　　@-webkit-keyframes  bounce  { 　　得到{才能 　　,,,:,100 px; 　　,,,-webkit-animation-timing-function:,打发走; 　　,,,animation-timing-function:,打发走; 　　,,} 　　25%的才能,{ 　　,,,:,50 px; 　　,,,-webkit-animation-timing-function:,在; 　　,,,animation-timing-function:,在; 　　,,} 　　50%的才能,{ 　　,,,:,150 px; 　　,,,-webkit-animation-timing-function:,打发走; 　　,,,animation-timing-function:,打发走; 　　,,} 　　75%的才能,{ 　　,,,:,75 px; 　　,,,-webkit-animation-timing-function:,在; 　　,,,animation-timing-function:,在; 　　,,} 　　用{才能 　　,,,:,100 px; 　　,,} 　　} 　　@keyframes  bounce  { 　　得到{才能 　　,,,:,100 px; 　　,,,-webkit-animation-timing-function:,打发走; 　　,,,animation-timing-function:,打发走; 　　,,} 　　25%的才能,{ 　　,,,:,50 px; 　　,,,-webkit-animation-timing-function:,在; 　　,,,animation-timing-function:,在; 　　,,} 　　50%的才能,{ 　　,,,:,150 px; 　　,,,-webkit-animation-timing-function:,打发走; 　　,,,animation-timing-function:,打发走; 　　,,} 　　75%的才能,{ 　　,,,:,75 px; 　　,,,-webkit-animation-timing-function:,在; 　　,,,animation-timing-function:,在; 　　,,} 　　用{才能 　　,,,:,100 px; 　　,,} 　　}

3,运行效果

css中关键帧有什么用