CSS3 如何实现飘动的云朵动画

蔚落 2023-10-12 13:26 84阅读 0赞

**目录**

一、动画的定义

二、动画的基本使用

2.1.-animation-name

2.2.-animation-duration

2.3.-animation-timing-function

2.4.-animation-delay

2.5.-animation-iteration-count

2.6.-animation-direction

2.7.-animation-fill-mode

2.8.-animation-play-state

2.9.动画模块连写格式

三、飘动的云朵动画的实现

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

## 一、动画的定义 ##

过渡动画是**两个状态间**的变化，帧动画可以处理动画过程中不同时间的细节变化，不过对过渡动画理解后再不习帧动画会非常容易，也可以把帧动画理解为多个帧之间的过渡动画。

## 二、动画的基本使用 ##

#### **2.1.-animation-name**  ####

指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。

@keyframes animiationName{
               keyframes-selector{
                   css-style;
               }
    		}

#### **2.2.-animation-duration**  ####

动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长

time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

#### **2.3.-animation-timing-function**  ####

设置动画将如何完成一个周期，告诉系统动画执行的速度

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:104px;">值</td> 
   <td style="width:394px;">执行速度</td> 
  </tr> 
  <tr> 
   <td style="width:104px;">linear</td> 
   <td style="width:394px;">动画从头到尾的速度是相同的。匀速</td> 
  </tr> 
  <tr> 
   <td style="width:104px;">ease</td> 
   <td style="width:394px;">默认。动画以低速开始，然后加快，在结束前变慢。</td> 
  </tr> 
  <tr> 
   <td style="width:104px;">ease-in</td> 
   <td style="width:394px;">动画以低速开始。</td> 
  </tr> 
  <tr> 
   <td style="width:104px;">ease-out</td> 
   <td style="width:394px;">动画以低速结束。</td> 
  </tr> 
  <tr> 
   <td style="width:104px;">ease-in-out</td> 
   <td style="width:394px;">动画以低速开始和结束。</td> 
  </tr> 
  <tr> 
   <td style="width:104px;">cubic-bezier(n,n,n,n)</td> 
   <td style="width:394px;">在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</td> 
  </tr> 
 </tbody> 
</table>

#### **2.4.-animation-delay**  ####

设置动画在启动前的延迟间隔。time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0

#### **2.5.-animation-iteration-count**  ####

定义动画的播放次数。告诉系统动画需要执行几次

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:center;width:117px;">&nbsp;值</td> 
   <td style="text-align:center;width:381px;">执行次数</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:117px;">n</td> 
   <td style="text-align:center;width:381px;">一个数字，定义应该播放多少次动画</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:117px;">infinite</td> 
   <td style="width:381px;"> <p style="text-align:center;">无限次执行</p> </td> 
  </tr> 
 </tbody> 
</table>

#### **2.6.-animation-direction**  ####

指定是否应该轮流反向播放动画。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:center;width:131px;">值</td> 
   <td style="text-align:center;width:368px;">播放方向</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:131px;">normal</td> 
   <td style="text-align:center;width:368px;">默认的取值, 执行完一次之后回到起点继续执行下一次</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:131px;">alternate</td> 
   <td style="text-align:center;width:368px;">往返动画, 执行完一次之后往回执行下一次</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:131px;">reverse</td> 
   <td style="text-align:center;width:368px;">反向执行</td> 
  </tr> 
 </tbody> 
</table>

#### **2.7.-animation-fill-mode**  ####

规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:132px;">none</td> 
   <td style="width:367px;">不做任何改变</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">forwards</td> 
   <td style="width:367px;">让元素结束状态保持动画最后一帧的样式</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">backwards</td> 
   <td style="width:367px;">让元素等待状态的时候显示动画第一帧的样式</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">both</td> 
   <td style="width:367px;">让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式</td> 
  </tr> 
 </tbody> 
</table>

#### **2.8.-animation-play-state**  ####

告诉系统当前动画是否需要暂停

running: 执行动画

paused: 暂停动画

#### **2.9.动画模块连写格式** ####

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

## 三、飘动的云朵动画的实现 ##

<!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>
                /* 天空轮播 晴朗 阴 晴 */
                * {
                    margin: 0;
                    padding: 0;
                }
                .parent {
                    /* vh viewHeight 视口区域高度 vw  viewWidth 视口区域宽度 */
                    height: 100vh;
                    background-color: skyblue;
                    animation: sky 10s linear infinite;
                }
                /* 定义一个天空动画 */
                @keyframes sky {
                    0% {
                        background-color: skyblue;
                    }
                    50% {
                        background-color: #000;
                    }
                    100% {
                        background-color: skyblue;
                    }
                }
                .cloud_one {
                    width: 300%;
                    height: 600px;
                    margin: 30px auto;
                    background: url(https://i.hd-r.cn/04462965ba09f768e47b6ea8cb065b1c.png) repeat-x;
                    position: fixed;
                    left: 0;
                    top: 0;
                    animation: cloud 20s linear infinite;
                }
                .cloud_two {
                    width: 300%;
                    height: 600px;
                    margin: 30px auto;
                    background: url(https://s3.bmp.ovh/imgs/2023/06/10/dc7235f6f0a978b5.png) repeat-x;
                    position: fixed;
                    left: 0;
                    top: 0;
                    animation: cloud 40s linear infinite;
                }
                .cloud_three {
                    width: 300%;
                    height: 600px;
                    margin: 30px auto;
                    background: url(https://s3.bmp.ovh/imgs/2023/06/10/8201e7f468f3570c.png) repeat-x;
                    position: fixed;
                    left: 0;
                    top: 0;
                    animation: cloud 60s linear infinite;
                }
                @keyframes cloud {
                    from {
                        left: 0;
                    }
                    to {
                        left: -200%;
                    }
                }
            </style>
        </head>
        <body>
            <div class="parent">
                <div class="cloud_one"></div>
                <div class="cloud_two"></div>
                <div class="cloud_three"></div>
            </div>
        </body>
    </html>

最终实现效果如下

**图片已转为在线地址，大家可以直接复制使用。**

![7d4c2f40a8304962bbc4424bccc0a362.gif][]

[7d4c2f40a8304962bbc4424bccc0a362.gif]: https://img-blog.csdnimg.cn/7d4c2f40a8304962bbc4424bccc0a362.gif