html - 如何让CSS动画完成后不反转？里面的例子-6ren

html - 如何让CSS动画完成后不反转？里面的例子

转载作者：行者123 更新时间：2023-11-28 16:53:28

24

4

我目前有一张使用关键帧旋转和缩放的图片，但我的问题是每次迭代后它都会反转旋转方向。我如何阻止这种情况发生，以便在一个方向上平滑旋转？ JSFiddle .在此处查看完整网页 HTML:

<html class="fourzerofour">
<head>
  <!-- Hey, look at you, you know how to view the source code, well done! Here's a unicode cookie: 🍪-->
  <meta charset="UTF-8">
  <title>Egrodo | 404</title>
  <link rel="stylesheet" type="text/css" href="../CSS/error404.css" media="screen, projection" />
  <link rel="stylesheet" type="text/css" href="../CSS/materialize.css" />
  <link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
  <link rel='shortcut icon' href='../favicon.ico' type='image/x-icon'/ >
</head>

<body class="fourzerofour">
  <section class="fourzerofour">
    <p class="fourzerofour">
      404 - What have you done?!?
    </p>
    <img draggable="false" class="rotating fourzerofour" src="https://i.imgur.com/n5SVALx.png">
  </section>
</body>

</html>

和我的整页 CSS:

body {
  font-family: 'Raleway', sans-serif;
}
p.fourzerofour {
  font-size: 2.4em;
  color: white;
  display: block;
  margin-top: -2em;
  margin-bottom: 2em;
}

body.fourzerofour {
  height: 100%;
  background-color: darkgrey;
}
section.fourzerofour {
  position: relative;
  height: 100%;
  text-align: center;
  margin-top: 23%;

}

.rotating {
  -webkit-animation: rotating 3s linear infinite;
  -moz-animation: rotating 3s linear infinite;
  -ms-animation: rotating 3s linear infinite;
  -o-animation: rotating 3s linear infinite;
  animation: rotating 3s linear infinite;
  animation-direction: alternate;
  width: 10em;
}

p.fourzerofour + .rotating:active {
  -webkit-filter: invert(1);
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  50% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1):
  }
  100% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
}

@keyframes rotating {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  50% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) sscale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
  100% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
}

最佳答案

摆脱 infinite 行并删除 50% 关键帧样式以及这是动画的中间部分。相反，给 100% 你想要的最终动画样式:JS Fiddle

在动画上附加 infinite 将使其不断循环。

.rotating {
  -webkit-animation: rotating 3s linear;
  -moz-animation: rotating 3s linear;
  -ms-animation: rotating 3s linear;
  -o-animation: rotating 3s linear;
  animation: rotating 3s linear;
  animation-direction: alternate;
  width: 10em;

}

p.fourzerofour + .rotating:active {
      -webkit-filter: invert(1);

}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  100% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1):
  }

}

@keyframes rotating {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  100% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) sscale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }

}

如果我误解了所需的效果，而您希望它在一个方向上不断循环，请参阅@maioman 的回答

关于html - 如何让CSS动画完成后不反转？里面的例子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32477239/

24

4

0

文章推荐： javascript - 使用正则表达式以代码格式分离innerHTML元素

文章推荐： html - 如何获取设备的宽度(不是视口(viewport))？

文章推荐： javascript - 有没有办法在 document.write 中编写 i/else 语句？

文章推荐： jquery - 自定义滚动条跨浏览器

crypt_r() 例子？
谁能给我一个关于如何使用函数 crypt_r() 的例子吗？在手册页中，不清楚返回的 char * 字符串是指向函数本身内部(在堆中)分配的内存块，还是仍然指向静态内存，如 crypt()？最佳答
security - Spectre 例子
在 Spectre 中paper ，有一个利用越界数组访问的示例(第 1.2 节)。代码是 if (x < array1_size) y = array2[ array1[x] * 256 ];
语法:自上而下和自下而上的区别？ (例子)
这是 Grammar: difference between a top down and bottom up? 的后续问题我从这个问题中了解到: 语法本身不是自上而下或自下而上的，而是解析器有些
java - java中在构造函数中声明变量合法吗？例子
在java的构造函数中声明变量合法吗？示例。 Time(){ long timeMill = System.currentTimeMillis(); int secon
jquery - 光滑的网格 - 例子？
我一直在仔细研究 slick grid 的示例，并且想要 ping SO 社区并查询 Excel 电子表格编辑演示的示例？就存储而言，网格仅存储整数数据，并且网格将托管在 mvc3 razor 页面内
html - 如何在响应式网站中将菜单居中？ (例子)
我很难将愚蠢的菜单置于我网站页面的中心。我知道我可以将外部 div 的宽度设置为 px 值，但我怎样才能让它以响应式网站为中心？这是页面: http://103.4.17.225/~america/i
html - 为什么在打开网页时调整大小的桌面浏览器和移动设备在大小方面不一样？例子
我正在寻找可在 wordpress 上使用的主题。有时，页面会在调整大小的网络浏览器上正确加载，但在移动设备上却不能，即使尺寸相同，它也会加载某种错误(通常是错位)。例如，在此页面中 ( http:/
谁能帮助我理解这个特殊的 union 例子？
union { unsigned char raw[8]; struct { uint8_t gz_method; uint8_t flag;
OpenCV::matchShapes() 例子？
我想使用 matchShapes() 函数在查询图像中查找对象。假设我有一本书的模型图像，我想提取它的形状，然后尝试在另一幅图像中找到这本书(它的形状)。我在谷歌上搜索了很多，但找不到任何关于如何
ruby-inotify 例子？
我正在寻找一个使用 inotify 的简单、简洁的示例gem 来检测目录的更改。它缺少示例。最佳答案 examples/watcher.rb 中有一个示例.该链接指向 aredridel 的 re
algorithm - 这是考虑编程中递归性的正确方法吗？ (例子)
我一直在努力学习编程中的递归是什么，我需要有人来确认我是否已经完全理解它是什么。我尝试考虑的方式是通过对象之间的碰撞检测。假设我们有一个函数。当确定发生碰撞时调用该函数，并使用对象列表调用它以确定
java - jBullet 例子
我正在尝试学习如何在我正在处理的项目中使用 jBullet，我已经查看了源提供的演示，但我只是无法弄清楚这些演示如何显示对象。谁有好的资源可以指点我或提供一个在屏幕上显示一个或两个对象的基本示例？在
java - JGraphT 例子
我想在一个简单的 x,y 图表上绘制线条，以使用 JGraphT 在 JApplet 中显示。我找到的例子不是很有帮助。有人可以给我指出一些简单的 JGraphT 示例吗？最佳答案这里有一个例子，
algorithm - 什么是滑动窗口算法？例子？
在解决几何问题时，我遇到了一种称为滑动窗口算法的方法。真的找不到任何关于它的学习 Material /细节。算法是关于什么的？最佳答案我认为它更像是一种技术而不是一种算法。这是一种可用于各种算
java - 同步方法可以有竞争条件吗？ [例子]
我正在学习同步方法，以防止 Java 中的竞争条件和不良行为。我看到了以下示例，并被告知竞争条件非常微妙: public class Messages { private String messa
hadoop - 如何解析多个pdf转换成hadoop(例子)
我有 100 万个 pdf，如何使用 hadoop 转换为文本并将其用于分析。目标是利用 hadoop 的强大功能将 pdf 数据提取为文本。最佳答案我已经在 Hadoop 上处理了一个 pdf
database - 规范化过多与过少，例子？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
c++ - 为什么不能从析构函数中抛出。例子
我读到过，由于堆栈展开，从析构函数中抛出不是一个好主意。我不确定我是否完全理解。所以我尝试了下面的例子 struct foo { ~foo() { throw 1;
url-rewriting - encodeURL() 例子？
任何人都可以告诉我一个简单的(代码)示例来展示 response.encodeURL() 的用法吗？我所有的搜索(包括 google 和 stackoverflow)只提供了 encodeURL()
facebook - haskell facebook 例子
我受困于 haskell 类型。 {-# LANGUAGE OverloadedStrings #-} module Main ( main ) where import qualified

首页

博学

6Ren·AI

商城

html - 如何让CSS动画完成后不反转？里面的例子