html - 如何在完成后禁用 CSS 动画-6ren

html - 如何在完成后禁用 CSS 动画

转载作者：太空宇宙更新时间：2023-11-03 22:21:46

26

4

我有这个运行蓝色和红色渐变的 Windows 10 模拟器动画。此动画从以黑色开始的左侧过渡到以红色开始的右侧，然后从左侧过渡回黑色，这就是动画结束的时间。我正在尝试找到一种方法在动画运行一次后如何暂停/禁用动画(从左到右然后向左)为我的下一个 css 动画腾出空间，但是我不知道如何执行它。

是否有一个简单的 css 属性使动画只运行一次？

            <html>
    <head>
    <title>Windows 10 Simulator</title>

    <link href="https://fonts.googleapis.com/
    css?family=Noto+Sans|Open+Sans|PT+Sans|
    Raleway|Source+Sans+Pro" rel="stylesheet">
    </head>

    <body>


    <style onload>
    html, body{
    margin: 0;
    padding: 0;

    background-color: #000;
    }

    .wrapper { 
      height: 100%;
      width: 100%;
      left:0;
      right: 0;
      top: 0;
      bottom: 0;
      position: absolute;
    background: linear-gradient(124deg,  #000000, #000000, #0095f0 ,#0095f0, #0095F0, #ff0000, #ff0000, #0095f0);
    background-size: 1800% 1800%;

    animation-iteration-count: 0;  
    animation-fill-mode: forwards;
    animation: rainbow 30s ease infinite;
    }


    @keyframes rainbow { 
        0% {background-position:  0% 0%}
        10%{background-position: 100%% 15%}
        20%{background-position: 100% 30%}
        30%{background-position: 100% 45%}
        40%{background-position: 100% 60%}
        50%{background-position: 100% 85%}
        60%{background-position: 100% 90%}
        70%{background-position: 100% 100%}
        80%{background-position: 100% 90%}
        90%{background-position: 100% 85%}
        80%{background-position: 100% 45%}
        100%{background-position:100% 15%}
        }



      span {
      margin-top: 250px;
      color: #fff;
      font-size: 30px;
      font-family: 'Raleway', sans-serif;
      animation-name: flickerAnimation;
      animation-duration: 5s;
      animation-iteration-count: 1;   
      position: absolute;
      opacity: 0;
      left: 0;
      right: 0;
      text-align: center;
      }

      #message{
      font-size: 10px;
      color: #fff;
      animation-name: alertFade;
      animation-duration: 4s;

      opacity: 0;
      animation-iteration-count: 1000;
      margin-top: 620px;
      }

      span:nth-child(1) {
      animation-delay: 1s;
      animation-duration: 5s;

      }

      span:nth-child(2) {
      animation-delay: 7s;
      animation-duration: 7s;
      }

      span:nth-child(3) {
      animation-delay: 15s;
      }

      span:nth-child(4) {
      animation-delay: 22s;
      }


      @keyframes flickerAnimation{

      0% {opacity: 0;}
      50% {opacity: 1;}
      100% {opacity: .0;}

      }

      @keyframes alertFade{
      0% {opacity: .25}
      50% {opacity: .75}
      100% {opacity: .25}
      }



      </style>
      <div class="wrapper">



      <span>Hello! </span>
      <span>Please Wait While We Setup</span>
      <span>This Will Only Take a Few Seconds</span>
      <span>Just a second...</span>


      <div style="text-align: center;">
      <p id="message" align="center">Please Do Not Turn 
              Off Your Device.</p>
      </div>
      </div>
      </body>
      </html>

最佳答案

在您的 .wrapper 类中，更改以下动画属性:

动画:彩虹 30s 轻松无限;到:动画:彩虹 30s ease 1;

您已使用 animation-iteration-count: 0; 将 animation-iteration-count 设置为 0，然后使用下面的动画属性让它无限播放彩虹30s轻松无限;

希望这对您有所帮助!

关于html - 如何在完成后禁用 CSS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53229382/

26

4

0

文章推荐： python直方图opencv计算每种颜色

文章推荐： c# - Entity Framework 和面向服务的架构如何入手？

dart - 对于 "pubsub.stream.listen(print, onDone: (){print(' 完成')})。 ", the "完成 :"never work
从 Redis 获取消息时，onDone:(){print('done')} 从未起作用。 import 'package:dartis/dartis.dart' as redis show PubS
Vim状态栏的预测/完成？
昨天我玩了一些vim脚本，并设法通过循环来对当前输入的内容进行状态栏预测(请参见屏幕截图(灰色+黄色栏))。问题是，我不记得我是怎么得到的，也找不到我用于该vim魔术的代码片段(我记得它很简单):它
Bash 完成
我尝试加载 bash_completion在我的 bash (3.2.25) 中，它不起作用。没有消息等。我在我的 .bashrc 中使用了以下内容 if [ -f ~/.bash_completio
具有等号和可枚举标志值的 Bash 完成
我正在尝试构建一个 bash 完成例程，它将建议命令行标志和合适的标志值。例如在下面 fstcompose 命令我想比赛套路先建议 compose_filter= 标志，然后建议来自 [alt_seq
重定向符号后的 Bash 完成
当我尝试在重定向符号后完成路径时，bash 完成的行为就好像它仍在尝试在重定向之前完成命令的参数一样。例如: dpkg -l > /med标签通过在 /med 之后点击 Tab我希望它完成通往 /
iphone - CAKeyframeAnimation 完成
我的类中有几个 CAKeyframeAnimation 对象。他们都以 self 为代表。在我的animationDidStop函数中，我如何知道调用来自哪里？是否有任何变量可以传递给 CAKe
cocoa - NSDateFormatter 完成
我有一个带有 NSDateFormatter 的 NSTextField。格式化程序接受“mm/dd/yy”。可以自动补全日期吗？因此，用户可以输入“mm”，格式化程序将完成当前月份和年份。最佳答
cocoa - NSTextfield 完成
有一个解决方案可以使用以下方法完成 NSTextField : - (NSArray *)control:(NSControl *)control textView:(NSTextView *)tex
javascript - 完成()与返回完成()
我正在阅读 Passport 的文档，我注意到 serialize()和 deserialize() done()被调用而不被返回。但是，当使用 passport.use() 设置新策略时在回调函数
javascript 加载图像!完成
在 ubuntu 11.10 上的 Firefox 8.0 中，尽管 img.complete 为 false，但仍会调用 onload 函数 draw。我设法用 setTimeout hack 解决
c++ - 等待第一个将来用C++完成
假设我有两个与两个并行执行的计算相对应的 future 。我如何等到第一个 future 准备好？理想情况下，我正在寻找类似于Python asyncio's wait且参数为return_when=
Java 数据结构表明队列已结束/完成？
我正在寻找一种 Java 7 数据结构，其行为类似于 java.util.Queue，并且还具有“最终项目已被删除”的概念。例如，应可以表达如下概念: while(!endingQueue.isFi
jquery - 完成 If 语句
这是一个简单的问题。 if ($('.dataTablePageList')) { 我想做的是执行一个 if 语句，该语句表示如果具有 dataTablesPageList 类的对象也具有 menu
jQuery 在执行之前等待replaceWith 完成
我用replaceWith批量替换了许多div中的html。替换后，我使用 jTruncate 来截断文本。然而它不起作用，因为在执行时，replaceWith 还没有完成。我尝试了回调技巧 ( H
JavaScript 表单提交()完成
有没有办法调用 javascript 表单 submit() 函数或 JQuery $.submit() 函数并确保它完成提交过程？具体来说，在一个表单中，我试图在一个 IFrame 中提交一个表单。
javascript - 推迟行动直到 .each() 完成
我有以下方法: function animatePortfolio(fadeElement) { fadeElement.children('article').each(function(i
android - registerEntityModifier 完成
我刚刚开始使用 AndEngine，我正在像这样移动 Sprite : if(pValueY < 0 && !jumping) { jumping =
android - 完成 "all"异步任务后更新屏幕
我正在使用 asynctask 来执行冗长的操作，例如数据库读取。我想开始一个新 Activity 并在所有异步任务完成后呈现其内容。实现这一目标的最佳方法是什么？我知道 onPostExecute
从另一个完成 Bash 完成
我有一个脚本需要命令名称和该命令的参数作为参数。所以我想编写一个完成函数来完成命令的名称并完成该命令的参数。所以我可以这样完成命令的名称 if [[ "$COMP_CWORD" == 1 ]];
android - 完成()不工作
我的应用程序有一个相当奇怪的行为。我在 BOOT_COMPLETE 之后启动我的应用程序，因此在我启动设备后它是可见的。 GUI 响应迅速，一切正常，直到我调用 finish()，按下按钮时，什么都没

首页

博学

6Ren·AI

商城

html - 如何在完成后禁用 CSS 动画