CSS 动画(animation)

简介

CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的，包括动画运行时间，开始值和结束值，还有动画的暂停和延迟其开始时间等。

基本用法：让一个盒子5s 内向右移动200px 再回到原始位置 交替运行

div{
   
width:100px;
height:100px;
background:red;
position:absolute;
animation: ourmove 5s infinite alternate;
 
}


@keyframs ourmove{

from{left:0px}
to{left:200px}

}

@keyframs firstmove{

0%{background:red;left:0px;top:0px}
50%{background:blue;left:100px;top:100px}
100%{background:green;left:0px;top:0px}

}

实现步骤整体分为两步

首先用@keyframs 定义好 动画

@keyframs 动画名{

from(开始的样式){},

to{结束的样式}

}

也可以用百分比代表进程

@keyframs 动画名{

0%{0%的样式}

50%{50%的样式}

100%{100%的样式}

}

给选择器加上动画来使用

div{

 animation: ourmove 5s infinite;

}

第二步可选的各类参数

animation-name	检索或设置对象所应用的动画名称
animation-duration	检索或设置对象动画的持续时间
animation-timing-function	检索或设置对象动画的过渡类型
animation-delay	检索或设置对象动画延迟的时间
animation-iteration-count	检索或设置对象动画的循环次数
animation-direction	检索或设置对象动画在循环中是否反向运动
animation-fill-mode	检索或设置对象动画时间之外的状态
animation-play-state	检索或设置对象动画的状态

animation

所有动画属性的简写属性，除了 animation-play-state 属性。

animation-name

规定 @keyframes 动画的名称。就是@keyframes后面跟着的动画名称。

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function

常见的动画速度参数默认是 "ease"

linear	线性过渡
ease	平滑过渡
ease-in	由慢到快
ease-out	由快到慢
ease-in-out	由慢到快再到慢
step-start	等同于 steps(1, start)
step-end	等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)	接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)	特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-delay

规定动画何时开始。默认是 0。也即是指动画延时执行时间。

animation-iteration-count

规定动画被播放的次数。默认是 1。当然，我们可以设置2次，3次，依次递推。还有个无线循环关键字infinite,也即是反复循环播放动画。

animation-direction

规定动画是否在下一周期逆向地播放。默认是 "normal"。当然还有下列值：

reverse	反方向运行
alternate	动画先正常运行再反方向运行，并持续交替运行
alternate-reverse	动画先反运行再正方向运行，并持续交替运行

animation-fill-mode

规定对象动画时间之外的状态。

none	默认值。不设置对象动画之外的状态
forwards	设置对象状态为动画结束时的状态
backwards	设置对象状态为动画开始时的状态
both	设置对象状态为动画结束或开始的状态,动画开始之前是"from"或"0%"关键帧；动画完成之后是"to"或"100%"关键帧状态。

animation-play-state

规定动画是否正在运行或暂停。默认是 "running"。还有个值paused：暂停。

在Vue中使用动画

步骤整理还是类似

有一些小区别

若有多个元素需要过度，则需要使用transition-group  且每个元素都要有 key值

也可以使用第三方css 动画库

Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.https://animate.style/​​​​​​​

$ npm install animate.css --save

import 'animate.css';

 

<template>
<div>
  <button @click="isShow = !isShow">点击切换</button>
  <button @click="isShow2 = !isShow2">第三方库切换效果</button>
  <transition-group name="hello" appear>
<!--  这里name叫什么 下面 .hello-enter-active 也叫hello 默认是v
      appear 页面一开始就显示动画
 -->

<!--
备注：若有多个元素需要过度，则需要使用transition-group  且每个元素都要有 key值
  -->
    <h2 v-show="isShow" key="1">{{title}}</h2>
    <h3 v-show="isShow" key="2">2022-{{id}}-11</h3>
  </transition-group>

  <transition-group appear
                    name="animate__animated animate__bounce"
                    enter-active-class="animate__bounceInUp"
                    leave-active-class="animate__bounceOutUp">
    <h2 v-show="!isShow2" key="3">2022一级建造师考试</h2>
    <h3 v-show="isShow2" key="4">2022-11-19</h3>
  </transition-group>


</div>
</template>

<script>
  import 'animate.css'
  export default {
    name: "Animation",
    data(){
      return{
        isShow:true,
        isShow2:true
      }
    },
    props:['id','title']
  }
</script>

<style scoped>
h2{
  background: orange;
  font-size: 20px!important;
  margin: 10px 0px;
  padding: 16px 0px 16px 16px;
}
  h3{
    background: cadetblue;
    font-size: 16px!important;
    margin: 8px 0px;
    padding: 12px 0px 12px 12px;
  }

.hello-enter-active{
  animation: hello 0.5s linear;
}

.hello-leave-active{
  animation: hello 0.5s linear reverse;
}

@keyframes hello {
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(0px);
  }
}
</style>