css3 延时动画-【实例】CSS3动画的6个动画属性详解

bendan520 css3

2023-08-29 0 9,190 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

CSS3动画有6个动画属性：

其句型为

动画：namedurationtiming-functiondelayiteration-countdirection；

每个属性的描述如下表所示

数值描述

动画名称

指定需要绑定到选择器的关键帧的名称

动画持续时间

指定完成动画所需的时间（以秒或毫秒为单位）。

动画计时函数

指定动画的速度曲线。

动画延迟

指定动画开始前的延迟。

动画迭代计数

指定动画应播放多少次。

动画方向

指定动画是否应反向旋转播放。

实例介绍

比如动画的句子如下：

animation: box_move 1s linear 2s alternate forwards;

那么各个属性值的解释如下：

/* 1. 通过动画集名称调用动画 */
animation-name: box_move;

/* 2.设置动画执行时间 */
animation-duration: 1s;

/* 3. 设置动画的速度类型 */
animation-timing-function: linear;

/* 4. 设置延时执行时间 */
animation-delay: 2s;

/* 5. 动画默认执行次数是1次, infinite: 无限次 */
animation-iteration-count: infinite; 

/* 6. 设置动画逆播【动画怎么正着播放，倒着播放的时候也是一样的效果】 normal*/
animation-direction: alternate;

/* 7. 设置动画执行完后的一个状态: 让动画停在结束时候的状态 */
animation-fill-mode: forwards;

需要理解的是css3 延时动画，box_move是动画的名称，即动画集合的名称，通过动画名称来调用动画集合，如下：

@keyframes box_move {
  from {}
  to {}
}

通过上面的写法，一个完整的动画才算是完整的，即一个动画需要包含两部分，一部分是动画复合属性语句，另一部分是动画集的代码。

案例一：搬运行李

病例疗效：

1. 盒子水平向右移动100pxcss3 延时动画，然后向上移动100px。

2、然后向左连100px，最后向下连100px，回到原点。

3、每次改变方向都必须改变背景颜色，重复执行。

演示下载

完整的 HTML 代码



  
    
    
    
    Document
    
      .box {
        width: 30px;
        height: 30px;
        background-color: blue;
        animation: move 8s linear infinite forwards;
      }
      @keyframes move {
        from {
        }
        25% {
          transform: translateX(100px);
          background-color: red;
        }
        50% {
          transform: translateX(100px) translateY(100px);
          background-color: green;
        }
        75% {
          transform: translateX(0px) translateY(100px);
          background-color: yellow;
        }
        to {
          transform: translateY(0px);
          background-color: blue;
        }
      }

本例中动画语句为：animation: move 8s LinearInfiniteforward; 其中move是动画episode的名称，8s是动画的执行时间，linear是动画的rate类型（匀速），infinite表示无限循环运动，forwards表示动画结束时离开状态不变。

案例2：抛物线

演示下载

完整的 HTML 代码



  
    
    Document

    
      body {
        position: relative;         
        background:#eee;
      }
      .animation {
        margin:100px 100px;
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: #ed3;
        animation: r 1.5s linear 0s infinite forwards,
          l 1.5s cubic-bezier(0, 0, 1, 0) 0s infinite forwards;
      }
      @keyframes r {
        from {
          left: 0;
        }
        to {
          left: 120px;
        }
      }
      @keyframes l {
        from {
          top: 0;
        }
        to {
          top: 340px;
        }
      }