css动画_css动画 csdn-CSDN博客

本文链接：https://blog.csdn.net/weixin_51610980/article/details/122503354

什么是动画

动画可以使元素在规定的时刻做出样式的改变和位置的改变等等

@keyframes

keyframes是关键帧的意思，我们使用@keyframes 时，可以用两种方式

from…to…
例子：
圆球将会发生颜色的转变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        border-radius: 50%;
        animation: myannimal 10s 1 ;
    }
    /* 关键帧 */
    @keyframes myannimal{
       form{
           background-color: blue;
       }
       to{
           background-color: cadetblue;
       }
    }
</style>
<body>
    <div>

    </div>
</body>
</html>

效果如下
在这里插入图片描述

每个阶段百分比
例子：
圆球将会围绕着边框走动一圈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        border: red solid 10px;
        width: 800px;
        height: 700px;
    }
    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        border-radius: 50%;
        animation: myannimal 10s 1 ;
    }
    /* 关键帧 */
    @keyframes myannimal{
        0% {
            transform: translateX(0) translateY(0);
        }
        25%{
            transform: translateX(600px) translateY(0);
        }
        50%{
            transform: translateX(600px) translateY(500px);
        }
        75%{
            transform: translateX(0) translateY(500px);
        }
        100%{
            transform: translateX(0) translatey(0);
        }
    }
</style>
<body>
    <div>

    </div>
</body>
</html>

效果如下：
在这里插入图片描述

animation的相关属性

关键帧包含元素在特定时间所拥有的样式。当我们选用该元素时，样式会默认出现，我们只需依次填好，再把不用的删去就可以了。

animation: name duration timing-function delay iteration-count direction fill-mode;

属性	描述
animation-name	动画名称
animation-duration	动画的持续时间
animation-timing-function	动画的过渡类型
animation-delay	动画延迟的时间
animation-iteration-count	动画的循环次数
animation-direction	动画在循环中是否反向运动
animation-fill-mode	动画时间之外的状态
animation-play-state	对象动画的状态

持续时间 animation-duration
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        border-radius: 50%;
        animation: myannimal 10s ;
    }
    /* 关键帧 */
    @keyframes myannimal{
       form{
           background-color: blue;
       }
       to{
           background-color: cadetblue;
       }
    }
</style>
<body>
    <div>

    </div>
</body>
</html>

该动画将会持续10s。
效果图如下：
在这里插入图片描述

过渡类型 animation-timing-function

属性	描述
linear	线性过渡
ease	平滑过渡
ease-in	由慢到快
ease-out	由快到慢
ease-in-out	开始和结束较慢
cubic-bezier(n,n,n,n)	自己定义

延迟时间animation-delay
例子：

<style>
    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        border-radius: 50%;
        animation: myannimal 10s ease-in 2s;
    }

该变色在开始前有 2 秒的延迟
效果图如下：
在这里插入图片描述

循环次数animation-iteration-count
infinite表示无限循环
例子：

    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        border-radius: 50%;
        animation: myannimal 3s ease-in 3;
    }

该动画将会进行三次

在这里插入图片描述

是否反向运动animation-direction

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

例子：

    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        border-radius: 50%;
        animation: myannimal 1s reverse;
    }

该效果将会反方向运行
在这里插入图片描述

动画时间之外的状态animation-fill-mode

属性	样式
none	默认值。不设置对象动画之外的状态
forwards	设置对象状态为动画结束时的状态
backwards	设置对象状态为动画开始时的状态
both	设置对象状态为动画结束或开始的状态

    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        border-radius: 50%;
        animation: myannimal 1s both;
    }

效果图为动画运行结束后的状态
1.none（开始状态）
在这里插入图片描述
2.forwards（结束状态）

在这里插入图片描述
3.backwards（开始状态）

4.both（结束状态）

对象动画的状态 animation-play-state

属性	描述
running	运动
paused	暂停

    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        border-radius: 50%;
        animation: myannimal 1s running;
    }

动画正常运行
2.

    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        border-radius: 50%;
        animation: myannimal 1s paused;
    }

动画暂停，没有运行