animation-fill-mode属性怎么用?

2024-01-17 17:21 小编

     注释:其属性值是由逗号分隔的一个或多个填充模式关键词。

 

  语法

 

  animation-fill-mode:none|forwards|backwards|both;

 

  值  描述

 

  none

 

  不改变默认行为。

 

  forwards

 

  当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

 

  backwards

 

  在animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

 

  both

 

  向前和向后填充模式都被应用。

 

  实例

 

  为h1元素规定填充模式:

 

  <!DOCTYPEhtml>

 

  <html>

 

  <head>

 

  <style>

 

  div

 

  {

 

  width:100px;

 

  height:100px;

 

  background:red;

 

  animation:myfirst5s;

 

  animation-fill-mode:forwards;

 

  -moz-animation:myfirst5s;/*Firefox*/

 

  -webkit-animation:myfirst5s;/*SafariandChrome*/

 

  -o-animation:myfirst5s;/*Opera*/

 

  }

 

  @keyframesmyfirst

 

  {

 

  from{background:red;}

 

  to{background:yellow;}

 

  }

 

  @-moz-keyframesmyfirst/*Firefox*/

 

  {

 

  from{background:red;}

 

  to{background:yellow;}


image.png



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

电话

13363039260

内部绝密传真282期

微信二维码