乐趣区

关于css3:animation动画

作用:

css3 动画属性

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
默认:none 0 ease 0 1 normal

搭配 @keyframes animation-name{} 应用

  • animation-name,规定须要绑定到选择器的 keyframe 名称
  • animation-duration,规定实现动画所破费的工夫,以秒或毫秒计
  • animation-timing-function,规定动画的速度曲线
  • animation-delay:规定在动画开始之前的提早
  • animation-iteration-count,规定动画应该播放的次数
  • animation-direction,规定是否应该轮流反向播放动画

实例:动画与设定实现工夫

语法

animation-name: keyframename | none;
animation-duration: time;

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    /* 动画名称 */
    animation-name: mymove;
    /* 动画实现工夫 */
     animation-duration: 5s;
  }
  @keyframes mymove {from { left: 0;}
    to {left: 200px;}
  }
</style>
<body>
  <h1> 实现动画与设定实现工夫 <h1>
  <div></div>
</body>

实例:动画开始工夫(提早开始工夫)

语法

animation-delay: time;
留神:容许负值,-2s 使动画马上开始,但跳过 2 秒进入动画周期

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    /* 动画名称 */
    animation-name: mymove;
    /* 动画实现工夫 */
    animation-duration: 5s;
    /* 动画开始工夫 */
    animation-delay: 2s;
  }
  @keyframes mymove {from { left: 0;}
    to {left: 200px;}
  }
</style>
<body>
  <h1> 实现动画开始工夫(提早开始工夫)<h1>
  <div></div>
</body>

实例:动画播放次数

语法

animation-iteration-count: n | infinite;

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    /* 动画名称 */
    animation-name: mymove;
    /* 动画实现工夫 */
    animation-duration: 5s;
    /* 动画播放次数 */
    animation-iteration-count: 2;
  }
  @keyframes mymove {from { left: 0;}
    to {left: 200px;}
  }
</style>
<body>
  <h1> 实现动画播放次数 <h1>
  <div></div>
</body>

实例:动画播放次数

语法

animation-iteration-count: n | infinite;

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    /* 动画名称 */
    animation-name: mymove;
    /* 动画实现工夫 */
    animation-duration: 5s;
    /* 动画播放次数 */
    animation-iteration-count: 2;
  }
  @keyframes mymove {from { left: 0;}
    to {left: 200px;}
  }
</style>
<body>
  <h1> 实现动画播放次数 <h1>
  <div></div>
</body>
退出移动版