运用css3动画需要运用什么规则

2024-01-18 10:19 小编
  标签定义及使用说明
 
  使用@keyframes规则,你可以创建动画。
 
  创建动画是通过逐步改变从一个CSS样式设定到另一个。
 
  在动画过程中,您可以更改CSS样式的设定多次。
 
  指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。
 
  0%是开头动画,100%是当动画完成。(推荐学习:CSS3视频教程。)
 
  为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。
 
  注意:使用animation属性来控制动画的外观,还使用选择器绑定动画。.
 
  语法
 
  @keyframesanimationname{keyframes-selector{css-styles;}}
 
  值
 
  说明
 
  animationname
 
  必需的。定义animation的名称。
 
  keyframes-selector
 
  必需的。动画持续时间的百分比。
 
  合法值:
 
  0-100%
 
  from(和0%相同)
 
  to(和100%相同)
 
  注意:您可以用一个动画keyframes-selectors。
 
  css-styles
 
  必需的。一个或多个合法的CSS样式属性
 
  实例:
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <title>CSS3</title>
 
  <style>
 
  div
 
  {
 
  width:100px;
 
  height:100px;
 
  background:blue;
 
  position:relative;
 
  animation:mymove5sinfinite;
 
  -webkit-animation:mymove5sinfinite;/*SafariandChrome*/
 
  }
 
  @keyframesmymove
 
  {
 
  0%{top:0px;background:blue;width:100px;}
 
  100%{top:200px;background:yellow;width:300px;}
 
  }
 
  @-webkit-keyframesmymove/*SafariandChrome*/
 
  {
 
  0%{top:0px;background:blue;width:100px;}
 
  100%{top:200px;background:yellow;width:300px;}
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <p><strong>注意:</strong>@keyframes规则不兼容IE9以及更早版本的浏览器.</p>
 
  <div></div>
 
  </body>
 
  </html>


Tag: 什么
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码