CSS 动画 -- Animation

乌秋

2189人浏览 · 2024-03-08 16:33:56

乌秋 · 2024-03-08 16:33:56 发布

一、动画属性？

1.animation-name:指定要对当前元素生效的关键帧的名字
2.animation-duration:指定动画的执行时间
3.animation-timing-function:跟transition-timing-function用法一样
4. animation-iteration-count:指定动画执行的次数 animation-iteration-count:infinite;（无限执行）

5.animation-direction:指定动画运行的方向

normal 默认值从from向to运行每次都是这样
reverse 从 to 向 from 运行每次都是这样
alternate 从 from 向 to 运行重复执行动画时反向执行
alternate-reverse 从 to 向 from 运行重复执行动画时反向执行

6 .animation-play-state:设置动画的执行状态

running 默认值动画执行
paused 动画暂停

7.animation-fill-mode:指定动画的填充模式，可选值:

none 默认值动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了 forwards 和 backwards

8.animation-delay:设置动画的延时
9.连写; animation: name duration timing-function delay iteration-count direction fill-mode;

以上是常见的动画，详情可看这位大佬的文章，学习完他的文章之后，我顺便写了个案例，效果我截张图，想看动态的小伙伴可以拿下面代码，运行就可以（图片根据自个需要换）
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    ul,
    li {
        list-style-type: none;
    }

    ul {
        margin: 200px auto;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        /* background-color: pink; */
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(20deg) rotateY(30deg);
        animation: move 3s forwards infinite linear;
    }

    @keyframes move {
        from {
            transform: rotateX(0deg) rotateY(0deg);
        }

        to {
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
    }


    @keyframes move1 {
        0% {
            transform: translateZ(150px);
        }

        50% {
            transform: translateZ(250px);
        }

        100% {
            transform: translateZ(-150px) rotateY(360deg);
        }

    }

    @keyframes move2 {
        0% {
            transform: translateZ(-150px);
        }

        50% {
            transform: translateZ(-250px);
        }

        100% {
            transform: translateZ(150px) rotateX(360deg);
        }

    }

    @keyframes move3 {
        0% {
            transform: translateX(150px) rotateY(90deg);
        }

        50% {
            transform: translateX(250px) rotateY(90deg);
        }

        100% {
            transform: translateX(-150px) rotateY(270deg);
        }

    }

    @keyframes move4 {
        0% {
            transform: translateX(-150px) rotateY(-90deg);
        }

        50% {
            transform: translateX(-250px) rotateY(-90deg);
        }

        100% {
            transform: translateX(150px) rotateY(-270deg);
        }

    }

    @keyframes move5 {
        0% {
            transform: translateY(-150px) rotateX(90deg);
        }

        50% {
            transform: translateY(-250px) rotateX(90deg);
        }

        100% {
            transform: translateY(150px) rotateX(270deg);
        }

    }

    @keyframes move6 {
        0% {
            transform: translateY(150px) rotateX(-90deg);
        }

        50% {
            transform: translateY(250px) rotateX(-90deg);
        }

        100% {
            transform: translateY(-150px) rotateX(-270deg);
        }

    }

    span {
        border: 5px solid #fff;
    }

    li {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #fff;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        /* grid-gap: 10px; */
        /* border-radius: 50%;
        overflow: hidden; */
    }

    li:nth-of-type(1) {
        transform: translateZ(150px);
        background: url('./2024.3.4.百叶窗/CSS百叶窗/img/01.jpg') center/cover;
        animation: move1 6s forwards;
    }

    li:nth-of-type(1)>span {
        /* background-color: #fabdbd; */
        height: 100%;
    }

    li:nth-of-type(2) {
        transform: translateZ(-150px);
        background: url('./2024.3.4.百叶窗/CSS百叶窗/img/02.jpg') center/cover;
        animation: move2 6s forwards;
    }

    li:nth-of-type(2)>span {
        /* background-color: #f7d889; */
    }

    li:nth-of-type(3) {
        transform: translateX(150px) rotateY(90deg);
        background: url('./2024.3.4.百叶窗/CSS百叶窗/img/03.jpg') center/cover;
        animation: move3 6s forwards;
    }

    li:nth-of-type(3)>span {
        /* background-color: #bef46e; */
    }

    li:nth-of-type(4) {
        transform: translateX(-150px) rotateY(-90deg);
        background: url('./2024.3.4.百叶窗/CSS百叶窗/img/04.jpg') center/cover;
        animation: move4 6s forwards;
    }

    li:nth-of-type(4)>span {
        /* background-color: #89f7dc; */
    }

    li:nth-of-type(5) {
        transform: translateY(-150px) rotateX(90deg);
        background: url('./2024.3.4.百叶窗/CSS百叶窗/img/05.jpg') center/cover;
        animation: move5 6s forwards;
    }

    li:nth-of-type(5)>span {
        /* background-color: #89a6f7; */
    }

    li:nth-of-type(6) {
        transform: translateY(150px) rotateX(-90deg);
        background: url('./2024.3.4.百叶窗/CSS百叶窗/img/06.jpg') center/cover;
        animation: move6 6s forwards;
    }

    li:nth-of-type(6)>span {
        /* background-color: #f789d8; */
    }
</style>

<body>
    <ul>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>

        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>

        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>

        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>

        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>

        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>

    </ul>
</body>

</html>