前端CSS3详细教程-03

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

CSS3-03

一、动画(animation)

1、什么是动画

• 动画是使元素从一种样式逐渐变化为另一种样式的效果
• 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

2、动画实现步骤

• 定义动画
• 调用定义好的动画

二、定义动画

• 语法：

  @keyframes 动画名称 {
      0% {
          width: 100px;
      }
      100% {
          width: 200px
      }
  }
  

  • 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
  • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
  • 可以用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%
  • 动画序列和动画中的样式可以定义任意多个

三、使用动画

• 语法：

  /* 调用动画 */
  animation-name: 动画名称;
  /* 持续时间 */
  animation-duration: 持续时间；
  

  • @keyframes 创建动画，需要把它绑定到一个html元素，否则动画不会有任何效果

• 必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0

代码演示

div {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    /* 调用动画 */
    animation-name: divRun;
    /* 持续时间 */
    animation-duration: 5s;
} 
​
/* 定义动画 */
@keyframes divRun {
    0% {
        left: 0;
        top: 0;
    }
    50% {
        background-color: green;
        left: 600px;
    }
    100% {
        left: 0px;
        top: 600px;
        background-color: blue;
    }
}

四、动画常见属性

属性	描述
@keyframes	定义动画
animation-name	动画名称（必须）
animation-duration	动画完成一个周期所需时间，默认为0 （必须）
animation-timing-function	动画的速度曲线，默认是ease
animation-delay	动画延迟执行的时间，默认为0
animation-iteration-count	动画播放的次数，默认为1，还可设置为infinite（无限）
animation-direction	动画是否在下一周期逆向播放，默认为normal,逆播放为alternate
animation-fill-mode	动画结束后状态。保持为forwards, 回到起始为backwords
animation-play-state	动画当前状态。默认为running，还可设置为paused
animation	所有动画的简写属性。除了amination-play-state

代码演示

div {
    width: 100px;
    height: 100px;
    background-color: green;
    /* 动画名称 */
    animation-name: move;
    /* 动画花费时长 */
    animation-duration: 2s;
    /* 动画速度曲线 */
    animation-timing-function: ease-in-out;
    /* 动画等待多长时间执行 */
    animation-delay: 2s;
    /* 规定动画播放次数 infinite: 无限循环 */
    animation-iteration-count: infinite;
    /* 是否逆行播放 */
    animation-direction: alternate;
    /* 动画结束之后的状态 */
    animation-fill-mode: forwards;
}
​
div:hover {
    /* 规定动画是否暂停或者播放 */
    animation-play-state: paused;
}
​
@keyframes move {
    0% {
        transform: translate(0px)
    }
    100% {
        transform: translate(500px, 0)
    }
}

1、动画速度曲线

可以通过谷歌浏览器来调节贝塞尔曲线的值

• 语法：

  animation-timing-function: ease(默认) | linear | ease-in | ease-out | ease-in-out | steps()
  

值	描述
ease	动画低速开始，然后加快，在结束前变慢（默认）
linear	动画匀速
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低带开始和结束
steps()	动画以指定时间间隔步长执行

2、动画简写方式

• 语法：

  animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态;
  

  • 动画名称和持续时间必须要有
  • 其它有默认值的属性如果不需要可以省去
  • 简写属性里面不包含animation-paly-state
  • 暂停动画: animation-paly-state: paused，经常和鼠标经过等配合使用
  • 要想动画走回来，而不是直接调回来：animation-direction: alternate
  • 要想动画结束后，停在结束位置：animation-fill-mode: forwards

五、奔跑的小熊

代码展示

<!-- html部分 -->
​
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bear"></div>

/* css部分 */
 * {
     margin: 0;
     padding: 0;
}
​
body {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient( rgb(112, 104, 104), #fff, #ccc);
}
​
.bg1,
.bg2 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 300px;
    animation: changeBg 5s linear infinite;
}
​
.bg1 {
    background: url(image/bg1.png) repeat-x;
}
​
.bg2 {
    z-index: 1;
    background: url(image/bg2.png) repeat-x;
}
​
.bear {
    z-index: 2;
    position: absolute;
    bottom: 10px;
    width: 200px;
    height: 100px;
    background: url(image/bear.png) no-repeat;
    animation: run .6s steps(8) infinite, move 2s linear forwards;
}
​
@keyframes changeBg {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -3840px 0;
    }
}
​
@keyframes run {
    0% {
        background-position: 0 0;
    }
    to {
        background-position: -1600px 0;
    }
}
​
@keyframes move {
    0% {
        left: 0;
    }
    100% {
        left: 50%;
        transform: translateX(-50%);
    }
}

\