css中关键帧指的是什么意思

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

在css中,关键帧的意思为“关键帧”,是一种创建动画的css规则,它可以定义一个css动画的一个周期的行为,可通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。

<强> css @keyframes规则

@keyframes规则用于指定动画规则,定义一个css动画的一个周期的行为。

定义动画,必须从@keyframes规则开始.@keyframe规则由关键字“@keyframes”组成,后跟一个标识符,给出动画的名称(将使用animation-name引用),然后是一组样式规则(用大括号分隔),然后,通过使用标识符作为“animation-name”属性的值,将动画应用于元素。

语法:

@keyframes  animation-name  {keyframes-selector  {css样式;}}

说明:

创建动画的原理是,将一套css样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套css样式。以百分比来规定改变发生的时间,或者通过关键词“from"和“to",等价于0%和100% .0%是动画的开始时间,100%动画的结束时间。为了获得最佳的浏览器支持,您应该始终定义0%和100%选择器。

注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=癠TF-8"祝辞 　　& lt; style> 　　@import  url (http://fonts.googleapis.com/css?family=Gentium +基本:400700400斜体,700斜体); 　　body  { 　　background - color: # F5F5F5; 　　颜色:# 555; 　　字体大小:1.1 em; 　　字体类型:& # 39;Gentium 方面# 39;,,衬线; 　　} 　　 　　.container  { 　　保证金:50 px 汽车; 　　min-width: 320 px; 　　max-width: 500 px; 　　} 　　 　　.text  { 　　字体大小:3他们; 　　粗细:大胆的; 　　颜色:# 0099 cc的; 　　-webkit-transform-origin: left 中心; 　　-ms-transform-origin: left 中心; 　　transform-origin: left 中心; 　　-webkit-animation: fall  4 s 无限; 　　动画:fall  4 s 无限; 　　} 　　 　　@-webkit-keyframes  fall  { 　　从, 　　15%,{ 　　-webkit-transform:旋转(0),translateX (0); 　　变换:旋转(0),translateX (0); 　　透明度:1; 　　-webkit-animation-timing-function: cubic-bezier(07, 2.02,正,,.57); 　　animation-timing-function: cubic-bezier(07, 2.02,正,,.57); 　　} 　　50%, 　　60%,{ 　　-webkit-transform:旋转(90度),translateX (0); 　　变换:旋转(90度),translateX (0); 　　透明度:1; 　　-webkit-animation-timing-function: cubic-bezier(.82,点,点,,1); 　　animation-timing-function: cubic-bezier(.82,点,点,,1); 　　} 　　85%, 　　用{ 　　-webkit-transform:旋转(90度),translateX (200 px); 　　变换:旋转(90度),translateX (200 px); 　　透明度:0; 　　} 　　} 　　 　　@keyframes  fall  { 　　从, 　　15%,{ 　　-webkit-transform:旋转(0),translateX (0); 　　变换:旋转(0),translateX (0); 　　透明度:1; 　　-webkit-animation-timing-function: cubic-bezier(07, 2.02,正,,.57); 　　animation-timing-function: cubic-bezier(07, 2.02,正,,.57); 　　} 　　50%, 　　60%,{ 　　-webkit-transform:旋转(90度),translateX (0); 　　变换:旋转(90度),translateX (0); 　　透明度:1; 　　-webkit-animation-timing-function: cubic-bezier(.82,点,点,,1); 　　animation-timing-function: cubic-bezier(.82,点,点,,1); 　　} 　　85%, 　　用{ 　　-webkit-transform:旋转(90度),translateX (200 px); 　　变换:旋转(90度),translateX (200 px); 　　透明度:0; 　　} 　　} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body 风格=皌ext-align:, center"比; 　　& lt; div 类=癱ontainer"祝辞 　　& lt; p 类=皌ext"祝辞Falling  Text

css中关键帧指的是什么意思