欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  CSS3@keyframes是什么?有什么用?
 
  @keyframes是CSS3的一种规则,可以用来定义CSS动画的一个周期的行为,可以创建简单的动画。【相关视频教程推荐:CSS3教程】
 
  动画与转换类似,因为它们都是随时间改变CSS属性的表示值。主要区别在于,当属性值更改时(例如,当悬停时属性值发生改变时),转换会隐式的触发,但在应用动画属性时会显式执行动画。因此,动画需要显示动画属性的显式值。这些值是在@keyframes规则中指定的动画关键帧定义的。因此,@keyframes规则里是由一组封装的CSS样式规则组成的,这些规则描述了属性值如何随时间变化。
 
  然后,使用不同的CSSanimation(动画)属性,可以控制动画的许多不同方面,包括动画迭代的次数,是否在开始和结束值之间交替,以及动画是否应该运行或暂停。动画也可以延迟其开始时间。
 
  @keyframe规则由关键字“@keyframe”组成,后面接着是给出动画名称的标识符(将使用animation-name引用),随后是通过一组样式规则(用大括号分隔)。然后,通过使用标识符作为animation-name属性的值,将动画应用于元素。例如:
 
  /*定义动画*/
 
  @keyframes动画名称{
 
  /*样式规则*/
 
  }
 
  /*将它应用于元素*/
 
  .element{
 
  animation-name:动画名称(在@keyframes中已经声明好的);
 
  /*或使用动画简写属性*/
 
  animation:动画名称1s...
 
  }
 
  在@keyframes规则的大括号里有什么?
 
  在大括号中,我们需要定义关键帧或航点,这些关键帧或航点指定在动画期间的特定点处正在动画化的属性的值。这允许我们控制动画序列中的中间步骤。例如,一个简单动画的@keyframe可以是这样:
 
  
 
  @keyframeschange-bg-color{
 
  0%{
 
  background-color:red;
 
  }
 
  50%{
 
  background-color:blue;
 
  }
 
  100%{
 
  background-color:red;
 
  }
 
  }
 
  .demo{
 
  -webkit-animation:change-bg-color5sinfinite;
 
  animation:change-bg-color5sinfinite;
 
  }

1.gif



本文转载自中文网


 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56495.shtml