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

动画

  • 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。
animation­timing-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>
  • 效果如下：

下篇继续：
【47】HTML5（1）——简介