CSS动画——animation 关键帧动画详细讲解

目录

一、注意

二、@keyframes 规则

三、animation语法

---

一、注意

- 动画的是一个相对位置的移动。所以位置一定要定位，要么是ralative ，要么是absolute。

- 如果是静态的动画就不需要使用定位例如只改变颜色什么的

二、@keyframes 规则

- @keyframes 规则用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧

@keyframes animationName {
    from {
        css的样式: 样式的值;
    }

    to {
        css的样式: 样式的值;
    }
}
// 或者
@keyframes animationName {
    0% {
         css的样式: 样式的值;
    }

    100% {
        css的样式: 样式的值;
    }
}

- @keyframes 规则示例

@keyframes boxColor {
  0% {
    background-color: red;
  }
  25% {
    background-color: bisque;
  }
  50% {
    background-color: black;
  }
  75% {
    background-color: blue;
  }
  100% {
    background-color: firebrick;
  }
}

三、animation语法

1.animation: name duration timing-function delay iteration-count direction;复合用法

2. animation-name 规定需要绑定到选择器的 keyframe 名称

3. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

4. animation-timing-function 规定动画的速度曲线。 默认是 “ease”。

• 匀速：linear
• 低速开的->加速->结束前减速：ease(系统默认)
• 以低速开始：ease-in
• 以低速结束：ease-out
• 以低速开始和结束：ease-in-out

5.animation-delay 规定动画何时开始 。 1s (动画等待1s后开始)。

6.animation-iteration-count 规定动画被播放的次数 。 默认是 1。infinite无限次。

7. animation-direction 规定动画是否在下一周期逆向地播放 。 默认是 “normal”; alternate (轮流)。

• 系统默认 :   nomal 
• 往返动画，执行完一次之后往回执行下一次 : alternate
• 反向执行 ： reverse

8.animation-play-state 规定动画是否正在运行或暂停 。 默认是 “running” 播放; paused 暂停播放 。

9.animation-fill-mode 属性规定动画在播放之前或之后, 其动画效果是否可见; 规定对象动画时间之外的状态; none | forwards | backwards | both 。

• 不做任何改变 :  none
• 让元素结束状态保持动画最后一帧的样式 : forwards
• 让元素等待状态的时候显示动画第一帧的样式 : backwards
• 等待状态显示第一帧，结束状态保持最后一帧 : both