【46】CSS3 （4）——新增属性④动画

★文章内容学习来源：拉勾教育大前端就业集训营

动画

css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flas***以及 JavaScript。
css3 动画制作分为两步：创建动画、绑定动画。
本文目录如下：

一、创建动画

1. @keyframes 规则介绍

@keyframes 规则用于创建动画；
在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果；
可以改变任意多的样式任意多的次数；
需要使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。

2. @keyframes 书写方法

@keyframes 动画名称 {
   
     动画过程，可以添加任意百分比处的动画细节 
 }

2.1举例（用关键词 “from” 和 “to”）

 @keyframes move {
   
/* 从头开始，最好保持跟默认样式的状态一致 */
from {
   
     transform: translateY(0);
}
/* 到结束位置 */
to {
   
   transform: translateY(100px);
}

2.2举例（百分比）

@keyframes move2 {
   
      0% {
   
        transform: translateY(0);
      }
      25% {
   
        transform: translateY(100px);
      }
      50% {
   
        transform: translateY(0);
      }
      75% {
   
        transform: translateY(-100px);
      }
      100% {
   
        transform: translateY(0);
      }

二、绑定动画

1. animation 属性介绍

需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果；
animation 属性用于对动画进行捆绑；
语法：

 div {
   
     animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间； 
  }

其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。
举例：

 div {
   
     animation: move2 3s linear infinite 0； 
  }

2.animation单一属性列表

属性	描述
`animation-name`	规定 @keyframes 动画的名称。
`animation-duration`	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
`animationtiming-function`	规定动画的速度曲线。默认是 “ease”。
`animation-delay`	规定动画何时开始。默认是 0。（默认不延时）
`animation-iteration-count`	规定动画被播放的次数。默认是 1。infinite表示无限次播放

三、浏览器兼容

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

四、案例（制作简单动画）

要求：实现一个元素先水平向右移动500px，然后向下移动500px，然后向左移动500px，最后向上500px回到原位，5S完成动画并一直重复。
代码如下：

<!DOCTYPE html>
<html lang="en">
       <head>
             <meta charset="UTF-8">
             <title>动画</title>
             <style> .box {
     width: 100px; height: 100px; border-radius: 50px/50px; background-color:skyblue; animation: move 5s infinite; -webkit-animation: move 5s infinite; /*Chrome Safari*/ } @keyframes move {
     0% {
     transform: translate(0px,0px); } 25% {
     transform: translate(500px,0px); } 50% {
     transform: translate(500px,500px); } 75% {
     transform: translate(0px,500px); } 100% {
     transform: translate(0px,0px); } } </style>
       </head>
       <body>
              <div class="box">
              </div>
       </body>
</html>