帧动画(@keyframes)

使用 @keyframs 作为定义动画的关键词, 可以设置多个关键帧, 动画将会按顺序执行

帧动画使用步骤

• 定义关键帧, 并为每个关键帧设置样式

    /*定义帧动画的名称为myAnimation*/
     @keyframes myAnimation{
     from {background-color: red;} /*form表示起始关键帧 并设置颜色*/
     to {background-color: yellow;} /*to表示结束关键帧 并设置颜色*/
     }
  

• 添加动画

  将定义的帧动画与要使用帧动画的div的class设置为相同的名称

    /*css里设置div的宽度和高度*/
      .myAnimation { width: 100px;
      height: 100px;
        }
  
     /*html里设置class为myAnimation*/
    <div class="myAnimation"></div>
  

百分比定义帧动画(案例一说明)

使用百分比定义帧动画, 可以设置多个关键帧, 从1%到100%之间自定义区间的数值.

动画常用属性

在css文件中, 选择需要做帧动画的div, 将以下属性放在div里进行设置

  animation: example 4s 2s /*多个动画一起设置, 等同于以下三个设置*/

  animation-name: example;  /*可设置动画的名称*/

  animation-duration: 4s;  /*设置动画的持续时间*/

  animation-delay: 2s;    /*设置动画延迟时间,如2秒后执行*/

帧动画( @keyframe ) 和补间动画( transition )的区别?

1. 帧动画可以自定义起始关键帧和结束的关键帧, 而补间动画只能设置结束时的动画样式。
2. 帧动画更加灵活，可以制作复杂的动画.

案例一

• 使用百分比定义关键帧

@keyframes up{
    0%{transform: rotateX(180deg); opacity: 0;}
    40%{transform: rotateX(-40deg); opacity: 1;}
    60%{transform: rotateX(30deg); opacity: 1;}
    80%{transform: rotateX(-20deg); opacity: 1;}
    90%{transform: rotateX(10deg); opacity: 1;}
    100%{transform: rotateX(0deg); opacity: 1;}
}

.up {
    animation: up 1s forwards;
}

• 添加动画

<div class="up"></div>

案例二

/* 定义动画关键帧 */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* div元素申请使用名称为example的动画关键帧*/
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;  /*设置动画名称*/ 
    animation-duration: 4s;   /*动画持续时间*/
}

触发时机

起始值