CSS3动画-transition、animation、transform（translate/scale/rotate）

喜欢ヅ旅行 2021-07-25 13:26 550阅读 0赞

**目录**

一、transition（过渡）

1、transition-duration

2、transition-property

3、transition-timing-function

4、transition-delay

二、animation

1、@keyframes

2、animation-timing-function

3、animation-delay

4、animation-iteration-count：检索或设置对象动画的循环次数

5、animation-play-state：检索或设置对象动画的状态（running\\paused）

6、animation-direction；是否反向运动

三、transform

rotate

rotateX

rotateY

translate

translateX

translateY

scale

scaleX

scaleY

--------------------

# 一、transition（过渡） #

*  transition-duration    transition效果需要指定多少秒或毫秒才能完成
 *  transition-property    指定CSS属性的name，transition效果
 *  transition-timing-function    指定transition效果的转速曲线
 *  transition-delay    定义transition效果开始的时候

## 1、transition-duration  ##

![20191016101159857.gif][]

<template>
      <div class="test"></div>
    </template>
    
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      transition-duration: 1s;
    
      &:hover {
        width: 4rem;
        height: 4rem;
      }
    }
    </style>

## 2、transition-property ##

![20210319175518564.gif][]

<template>
      <div class="test"></div>
    </template>
    
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      transition-duration: 1s;
      transition-property: height;
    
      &:hover {
        width: 4rem;
        height: 4rem;
      }
    }
    </style>

## 3、transition-timing-function ##

*  linear（默认属性）    规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。    匀速
 *  ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。    快-慢-慢
 *  ease-in    规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。    快-快
 *  ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。    慢-慢
 *  ease-in-out    规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。    慢-快-慢
 *  cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。    自定义

![20210319180101745.gif][]

<template>
      <div class="test"></div>
    </template>
    
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      transition-duration: 1s;
      transition-timing-function: ease-in-out;
    
      &:hover {
        width: 4rem;
        height: 4rem;
      }
    }
    </style>

## 4、transition-delay ##

![20210319180312880.gif][]

<template>
      <div class="test"></div>
    </template>
    
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      transition-delay: 1s;
    
      &:hover {
        width: 4rem;
        height: 4rem;
      }
    }
    </style>

几个属性的简写，如下：

![20210319180659725.gif][]

<template>
      <div class="test"></div>
    </template>
    
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      transition: all 1s ease-in-out 2s;//动画持续一秒，缓进缓出，并在两秒钟后开始执行
    
      &:hover {
        width: 4rem;
        height: 4rem;
      }
    }
    </style>

# 二、**animation** #

*  @keyframes    定义一个动画,@keyframes定义的动画名称用来被animation-name所使用
 *  animation-name    检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
 *  animation-duration    检索或设置对象动画的持续时间
 *  animation-timing-function    检索或设置对象动画的过渡类型
 *  animation-delay    检索或设置对象动画的延迟时间
 *  animation-iteration-count    检索或设置对象动画的循环次数
 *  animation-direction    检索或设置对象动画在循环中是否反向运动
 *  animation-play-state    检索或设置对象动画的状态

## 1、@keyframes ##

#  ![20210319181812777.gif][] #

<template>
      <div class="test"></div>
    </template>
    
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      &:hover {
        animation: mymove 2s;
      }
    }
    @keyframes mymove {
      0% {
        width: 2rem;
        height: 2rem;
      }
      50% {
        width: 4rem;
        height: 4rem;
      }
      100% {
        width: 2rem;
        height: 2rem;
        margin-left: 5rem;
      }
    }
    </style>

其实上面的animation: mymove 2s;就是animation-name:mymove  和 animation-duration:2s;  的简写形式

## 2、animation-timing-function ##

*  linear    动画从头到尾的速度是相同的。
 *  ease    默认。动画以低速开始，然后加快，在结束前变慢。
 *  ease-in    动画以低速开始。
 *  ease-out    动画以低速结束。
 *  ease-in-out    动画以低速开始和结束。
 *  cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

![20210319182607923.gif][]

<template>
      <div class="test"></div>
    </template>
    
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      &:hover {
        animation: mymove 2s;
        animation-timing-function: ease-in-out;
      }
    }
    @keyframes mymove {
      0% {
        width: 2rem;
        height: 2rem;
      }
      50% {
        width: 4rem;
        height: 4rem;
      }
      100% {
        width: 2rem;
        height: 2rem;
        margin-left: 5rem;
      }
    }
    </style>

## 3、animation-delay ##

![20210319182848264.gif][]

<template>
      <div class="test"></div>
    </template>
    
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      &:hover {
        animation: mymove 2s;
        animation-delay: 1s;
      }
    }
    @keyframes mymove {
      0% {
        width: 2rem;
        height: 2rem;
      }
      50% {
        width: 4rem;
        height: 4rem;
      }
      100% {
        width: 2rem;
        height: 2rem;
        margin-left: 5rem;
      }
    }
    </style>

## 4、animation-iteration-count：检索或设置对象动画的循环次数 ##

## ![20210319183133750.gif][] ##

animation-iteration-count: infinite;表示无限循环

<template>
      <div class="test"></div>
    </template>
    
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      animation: mymove 2s;
      animation-iteration-count: infinite;
    }
    @keyframes mymove {
      0% {
        width: 2rem;
        height: 2rem;
      }
      50% {
        width: 4rem;
        height: 4rem;
      }
      100% {
        width: 2rem;
        height: 2rem;
        margin-left: 5rem;
      }
    }
    </style>

当然，还可以指定具体的循环次数，如下：

![20210319183426968.gif][]

<template>
      <div class="test"></div>
    </template>
    
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      animation: mymove 2s;
      animation-iteration-count: 3;//只循环三次
    }
    @keyframes mymove {
      0% {
        width: 2rem;
        height: 2rem;
      }
      50% {
        width: 4rem;
        height: 4rem;
      }
      100% {
        width: 2rem;
        height: 2rem;
        margin-left: 5rem;
      }
    }
    </style>

## 5、animation-play-state：检索或设置对象动画的状态（running\\paused） ##

![20210319183810358.gif][]

<template>
      <div class="test"></div>
    </template>
    <script>
    export default {
      name: "",
      components: {},
      data() {
        return {};
      },
      mounted() {
        setTimeout(() => {
          this.$refs.ref_test.style.animationPlayState = "paused";
        }, 3000);
        setTimeout(() => {
          this.$refs.ref_test.style.animationPlayState = "running";
        }, 5000);
      }
    };
    </script>
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      animation: mymove 2s;
      animation-iteration-count: 3;//只循环三次
    }
    @keyframes mymove {
      0% {
        width: 2rem;
        height: 2rem;
      }
      50% {
        width: 4rem;
        height: 4rem;
      }
      100% {
        width: 2rem;
        height: 2rem;
        margin-left: 5rem;
      }
    }
    </style>

## 6、animation-direction；是否反向运动 ##

*  normal    默认值。动画按正常播放。
 *  reverse    动画反向播放。
 *  alternate    动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
 *  alternate-reverse    动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
 *  initial    设置该属性为它的默认值。
 *  inherit    从父元素继承该属性。

![20210319184354813.gif][]

<template>
      <div class="test"></div>
    </template>
    
    <style lang="scss" scoped>
    .test {
      background-color: orange;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    
      animation: mymove 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    
    }
    @keyframes mymove {
      0% {
        width: 2rem;
        height: 2rem;
      }
      50% {
        width: 4rem;
        height: 4rem;
      }
      100% {
        width: 2rem;
        height: 2rem;
        margin-left: 5rem;
      }
    }
    </style>

# 三、transform #

## rotate ##

![20210319190457384.gif][]

<template>
      <img src="./二哈.jpg" />
    </template>
    
    <style lang="scss" scoped>
    img {
      width: 3rem;
      height: 4rem;
      border-radius: 50%;
      animation: myRotate 2s infinite linear;
    }
    @keyframes myRotate {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    </style>

## rotateX ##

![20210319190331967.gif][]

<template>
      <img src="./二哈.jpg" />
    </template>
     
    <style lang="scss" scoped>
    img {
      width: 3rem;
      height: 4rem;
      border-radius: 50%;
      animation: myRotateX 2s infinite linear;
    }
    @keyframes myRotateX {
      0% {
        transform: rotateX(0);
      }
      100% {
        transform: rotateX(360deg);
      }
    }
    </style>

## rotateY ##

![20210319190037933.gif][]

<template>
      <img src="./二哈.jpg" />
    </template>
    
    <style lang="scss" scoped>
    img {
      width: 3rem;
      height: 4rem;
      border-radius: 50%;
      animation: myRotateY 2s infinite linear;
    }
    @keyframes myRotateY {
      0% {
        transform: rotateY(0);
      }
      100% {
        transform: rotateY(360deg);
      }
    }
    </style>

## translate ##

![20210319191250858.gif][]

<template>
      <div>
        <img src="./二哈.jpg" />
      </div>
    </template>
    
    <style lang="scss" scoped>
    img {
      width: 3rem;
      height: 4rem;
      border-radius: 50%;
    
      animation: myTranslate 2s infinite linear;
    }
    @keyframes myTranslate {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(8rem, 8rem);
      }
    }
    </style>

## translateX ##

![20210319191436781.gif][]

<template>
      <div>
        <img src="./二哈.jpg" />
      </div>
    </template>
    
    <style lang="scss" scoped>
    img {
      width: 3rem;
      height: 4rem;
      border-radius: 50%;
    
      animation: myTranslateX 2s infinite linear;
    }
    @keyframes myTranslateX {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(8rem);
      }
    }
    </style>

## translateY ##

![20210319191716530.gif][]

<template>
      <div>
        <img src="./二哈.jpg" />
      </div>
    </template>
    
    <style lang="scss" scoped>
    img {
      width: 3rem;
      height: 4rem;
      border-radius: 50%;
    
      animation: myTranslateY 2s infinite linear;
    }
    @keyframes myTranslateY {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(8rem);
      }
    }
    </style>

## scale ##

![20210319191835650.gif][]

<template>
      <div>
        <img src="./二哈.jpg" />
      </div>
    </template>
    
    <style lang="scss" scoped>
    img {
      width: 3rem;
      height: 4rem;
      border-radius: 50%;
    
      animation: myScale 2s infinite linear;
    }
    @keyframes myScale {
      0% {
        transform: scale(0, 0);
      }
      100% {
        transform: scale(1, 1);
      }
    }
    </style>

## scaleX ##

![20210319192001176.gif][]

<template>
      <div>
        <img src="./二哈.jpg" />
      </div>
    </template>
    
    <style lang="scss" scoped>
    img {
      width: 3rem;
      height: 4rem;
      border-radius: 50%;
    
      animation: myScaleX 2s infinite linear;
    }
    @keyframes myScaleX {
      0% {
        transform: scaleX(0);
      }
      100% {
        transform: scaleX(1);
      }
    }
    </style>

## scaleY ##

![20210319192110672.gif][]

<template>
      <div>
        <img src="./二哈.jpg" />
      </div>
    </template>
    
    <style lang="scss" scoped>
    img {
      width: 3rem;
      height: 4rem;
      border-radius: 50%;
    
      animation: myScaleY 2s infinite linear;
    }
    @keyframes myScaleY {
      0% {
        transform: scaleY(0);
      }
      100% {
        transform: scaleY(1);
      }
    }
    </style>

# #

[20191016101159857.gif]: /images/20210725/1379e0cee3394ca0bfcf5c934d1c517b.png
[20210319175518564.gif]: /images/20210725/e35b0f39f7664e598ac89a3433dd44aa.png
[20210319180101745.gif]: /images/20210725/7b231630d1b847ccad71cbf62b5f50d6.png
[20210319180312880.gif]: /images/20210725/5a20446f38664804afc299a9dd15f543.png
[20210319180659725.gif]: /images/20210725/e6f46fecb1774afd8c8cf0c674ad2825.png
[20210319181812777.gif]: /images/20210725/24ae8bb9229e457a971a952bf6c891d8.png
[20210319182607923.gif]: /images/20210725/a99d49abde80426e9165bb846bba050d.png
[20210319182848264.gif]: /images/20210725/54fff05ef9de46d18492e45b5f9b74ac.png
[20210319183133750.gif]: /images/20210725/e811f5349cad49e984b83c381d074120.png
[20210319183426968.gif]: /images/20210725/89db060ac46048628c74d6d80cdaf265.png
[20210319183810358.gif]: /images/20210725/88e814ca6d514ac89c099c11ee553416.png
[20210319184354813.gif]: /images/20210725/589391f7360044a3bcddf367848a83d9.png
[20210319190457384.gif]: /images/20210725/e826e0d1280a43dea4d35033681c7113.png
[20210319190331967.gif]: /images/20210725/ac20c152423d4cc1a01871e2b7dab546.png
[20210319190037933.gif]: /images/20210725/d6ed1581d0b841b69fa4dfd0203b386b.png
[20210319191250858.gif]: /images/20210725/02bc24a574394f1fb7d61079b21c7bb6.png
[20210319191436781.gif]: /images/20210725/f131241de67a43c7b21182561a147392.png
[20210319191716530.gif]: /images/20210725/89386e68a24c43d38d09edacf201cf87.png
[20210319191835650.gif]: /images/20210725/3cc499ca0f624e61b60a540a749f39a3.png
[20210319192001176.gif]: /images/20210725/5ac3719048814e90947f7f7eae0e0e41.png
[20210319192110672.gif]: /images/20210725/8c60e8952b7d400c9d4f747a7e400b22.png