CSS动画：多动画同步播放或非同步播放

news2024/12/21 17:05:22

前言

本篇在讲什么

在CSS样式表现动画的基础上的拓展

本篇适合什么

适合初学H5的小白
适合初学CSS的小白
适合入门的前端程序

本篇需要什么

对Html和css语法有简单认知
Node.js(博主v18.13.0)的开发环境
Npm(博主v8.19.3)的开发环境
依赖VS code编辑器

本篇的特色

具有全流程的图文教学
重实践，轻理论，快速上手
提供全流程的源码内容

★提高阅读体验★

👉 ♠ 一级标题 👈

👉 ♥ 二级标题 👈

👉 ♣ 三级标题 👈

👉 ♦ 四级标题 👈

♠ 多动画同时播放

最近有点需求，需要对页面上一个组件同时去播放很多种动画、透明缩放之类的，所以就在之前的基础上多补充一些东西，对动画播放还不清楚的请跳转前文

CSS动画：transition触发动画和animation非触发动画

♥ 同步播放多个动画

我们先看看效果,让一个按钮同时旋转、缩放、透明度变化

在这里插入图片描述

我们在看一下完整代码

<!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>

    <style>
        .btn{
            width: 200px;
      		height: 40px;
            background-color: #4dccc6;
            margin-top: 20%;
            margin-left: 45%;
            animation: test 1s infinite;
        }
        @keyframes test{
            0% {
          		opacity:0;
                scale: 0;
                transform: rotate(0deg);
            }
            100% {
                opacity:1;
                scale: 1;
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>
    <div>
        <button class="btn">测试按钮</button>
    </div>
</body>
</html>

相当简单的一部分代码，我们挑重点来讲

使用@keyframes声明关键帧动画
在关键帧内部设置进度0%、100%
在进度内部设置对应的属性变换opacity、scale、rotate

这样子写没问题，但是缺点就是所有的动画都是同步播放的，如果想让其中一种变换延迟或者时间改变是没有办法的

♥ 非同步播放

现在我们有个需求，依旧是对按钮设置动画，只不过在第一遍出现的时候按钮不会旋转，我们依旧先看一下效果

在这里插入图片描述

我们在看一下修改过后的代码

<!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>

    <style>
        .btn{
            width: 200px;
      		height: 40px;
            background-color: #4dccc6;
            animation: test1 1s infinite;
        }
        .main
        {
            width: 200px;
      		height: 40px;
            margin-top: 20%;
            margin-left: 45%;
            animation: test2 1s 1s infinite;
        }
        @keyframes test1{
            0% {
          		opacity:0;
                scale: 0;
            }
            100% {
                opacity:1;
                scale: 1;
            }
        }
        @keyframes test2{
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>
    <div class="main">
        <button class="btn">测试按钮</button>
    </div>
</body>
</html>