CSS animation動畫

本文轉載自查看原文 2019-05-15 16:20 823 css

1. 概述

1.1 說明

在項目過程中，有時候需要使用動畫效果來展現某一效果，實現動畫效果的方式有很多種，而css3提供的animation屬性則可直接使用樣式進行控制動畫效果。

1.2 動畫使用

　　注意：IE10以前版本不支持animation屬性

1.2.1 animation 集合使用

　　示例：div橫向移動效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:divmove 5s infinite;
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes divmove
{
    from {left:0px;}
    to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {left:0px;}
    to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

- animation: name duration timing-funtion delay iteration-count direction fill-mode play-state;
  - name 對應animation-name單獨屬性，作用是指定要綁定到選擇器的關鍵幀(即為@keyframes 動畫指定一個名稱)的名稱
  - duration 對應animation-duration單獨屬性，定義動畫完成一個周期需要多少秒(s)或毫秒(ms)，即動畫播放完成花費時間。
  - timing-function 對應animation-timing-function單獨屬性，設置動畫將如何完成一個周期(如從開始到結束以相同的速度播放動畫)
  - delay 對應animation-delay單獨屬性，設置動畫在啟動前的延遲時間。
  - iteration-count 對應animation-iteration-count單獨屬性，定義動畫的播放次數
  - direction 對應animation-direction單獨屬性，定義是否循環交替反向播放動畫
  - fill-mode 對應animation-fill-mode單獨屬性，規定當動畫不播放時(當動畫完成或當動畫有一個延遲未開始播放)，要應用到元素的樣式
  - play-state 對應animation-play-state單獨屬性，指定動畫是否正在運行或已暫停

1.2.2 animation 單獨使用

　　示例：div橫向移動效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:divmove;
    animation-duration:5s;
    animation-iteration-count:infinite;
    -webkit-animation-name:mymove; /*Safari and Chrome*/
    -webkit-animation-duration:5s; /*Safari and Chrome*/
    -webkit-animation-iteration-count:infinite; /*Safari and Chrome*/
}

@keyframes divmove
{
    from {left:0px;}
    to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {left:0px;}
    to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

- animation-name 為@keyframes動畫指定名稱；
  - animation-name: keyframename | none ; keyframename要綁定到選擇器的關鍵幀的名稱，none指定有沒有動畫
- animation-duration 定義動畫完成一個周期需要多少秒或毫秒
  - animation-duration: time; time指定動畫播放完成花費的時間，默認值為0，表示沒有動畫效果
- animation-timing-function 指定動畫將如何完成一個周期
  - animation-timing-function: linear; 動畫從頭到尾的速度時相同的
  - animation-timing-function: ease; 默認，動畫以低速開始，然后加快，在結束前變慢
  - animation-timing-function: ease-in; 動畫以低速開始
  - animation-timing-function: ease-out; 動畫以低速結束
  - animation-timing-function: ease-in-out; 動畫以低速開始和結束
  - animation-timing-function: cubic-bezier(n,n,n,n); 在cubic-bezier(n,n,n,n)函數中的值的范圍是從0到1的數值
- animation-delay 動畫開始前等待多長時間，可以為負值(負值為進入立即開始，並且跳過設置的值進入動畫)
  - animation-delay: time;定義動畫開始前等待的時間，以秒或者毫秒為單位。默認值0
- animation-iteration-count 定義動畫應該播放多少次
  - animation-iteration-count: n; n為數字，定義應該播放多少次動畫
  - animation-iteration-count: infinite; 播放此時無限次

2. 代碼

2.1 代碼示例

　　警報燈

<template>
  <div class="warning-warp">
    <div class="warning-item warning-content">
      <span class="bulb"></span>
      <span class="bulb"></span>
      <span class="bulb"></span>
      <span class="bulb"></span>
      <span class="bulb"></span>
      <span class="bulb"></span>
    </div>
    <div class="warning-bottom"></div>
  </div>
</template>

<script>
  export default {
    name: "warning"
  }
</script>

<style scoped>
  .warning-warp {
    margin: 100px auto;
    width: 900px;
    display: flex;
    flex-direction: column;
  }

  .warning-warp .warning-item {
    height: 130px;
    width: 100px;
    float: left;
    margin: 0 5px;
    position: relative;
    padding: 20px 10px;
  }

  .warning-warp .warning-item.warning-content {
    border-radius: 50px 50px 0 0;
  }

  .warning-warp .warning-item.warning-content {
    background: #f00;
    box-shadow: 0 0 50px 10px #f00, inset 0 0 10px #f99;
    animation-name: warningLight;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-iteration-count: infinite;
  }

  .warning-warp .warning-item.warning-content .bulb {
    float: left;
    width: 10px;
    height: 10px;
    margin: 10px 15px;
    background: #ffe5e5;
    box-shadow: 0 0 20px 8px white;
    border-radius: 20px;
    opacity: 0.8;
    animation-name: bulb;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-iteration-count: infinite;
  }

  @keyframes bulb {
    0% {
      background: #ffe5e5;
      box-shadow: 0 0 20px 8px white;
    }
    50% {
      background: #ffe5e5;
      box-shadow: 0 0 40px 20px white;
    }
    100% {
      background: #ffe5e5;
      box-shadow: 0 0 20px 8px white;
    }
  }

  @keyframes warningLight {
    0% {
      box-shadow: 0 0 0 0 #f00;
    }
    50% {
      box-shadow: 0 0 50px 10px #f00, 0 0 200px 20px #f00;
      z-index: 10;
    }
    100% {
      box-shadow: 0 0 0 0 #f00;
    }
  }
  .warning-bottom {
    width: 110px;
    height: 30px;
    background: #000;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
  }
</style>

2.2 結果示例

　　結果類似(自制gif)

2.3 CodePen示例

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3(4)---動畫(animation) CSS動畫 animation與transition css的動畫animation CSS動畫(animation) CSS動畫Animation css動畫(transition/transform/animation) CSS3動畫之animation屬性 css復雜動畫（animation屬性） css 的過渡（transition）和動畫（animation） css3動畫 keyframe animation