CSS animation动画

时间  2021-07-11

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示例

联系我们 沪ICP备13005482号-10