正文 

当前位置： 首页 > 源码 >

相同的 CSS 动画没有相同的持续时间（带有动画背景颜色）

     2023-03-06     275

关键词：

【中文标题】相同的 CSS 动画没有相同的持续时间（带有动画背景颜色）【英文标题】：The same CSS animations does not have the same durations (with animated background color) 【发布时间】：2017-12-06 20:55:48 【问题描述】：

我尝试用 css 动画制作两个块。它具有相同的transform 动画，但其中之一也具有background-color 动画。此动画拆分为两个@keyframes。

查看代码（https://codepen.io/mctep/pen/Rgyaep）：

<style>
   .a 
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background-color: red;
      animation: a 1s infinite;
    

    .b 
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background-color: gray;
      animation: b 1s infinite;
    

    @keyframes a 
      0% 
        background-color: red;
        transform: translateX(0);
      

      50% 
        background-color: green;
        transform: translateX(100px);
      

      100% 
        background: red;
      
    

    @keyframes b 
      0% 
        transform: translateX(0);
      

      50% 
        transform: translateX(100px);
      
     
</style>

<div class="a"></div>
<div class="b"></div>

在谷歌浏览器中，彩色块的动画滞后于灰色块。在 Safari 和 FF 中，它完美运行。

我可以为background 制作一个@keyframes，为transform 制作另一个，它可以解决问题。但我想对单个元素使用 animation 属性的单个值。如果没有任何方法可以修复它，我会将 moving 和 coloring 动画分开。

为什么会这样？是谷歌浏览器的错误吗？

【问题讨论】：

变换：translateX100px);不正确，你看到了吗？ @Pv-Viana 谢谢，已修复 【参考方案1】：

无法为您提供为什么会发生这种情况的具体原因，但我们也可以通过在动画 B 中简单地指定 background-color 来消除 Chrome 的困惑。

@keyframes b 
  0% 
    background-color: gray; /* add this */
    transform: translateX(0);
  



.a 
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: a 1s infinite;

.b 
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: gray;
  animation: b 1s infinite;

@keyframes a 
  0% 
    background-color: red;
    transform: translateX(0);
  
  50% 
    background-color: green;
    transform: translateX(100px);
  
  100% 
    background: red;
  

@keyframes b 
  0% 
    background-color: gray;
    transform: translateX(0);
  
  50% 
    transform: translateX(100px);
  

<div class="a"></div>
<div class="b"></div>

【讨论】：

Flutter：一次多次使用相同的动画小部件

】Flutter：一次多次使用相同的动画小部件【英文标题】：Flutter:UsingSameAnimatedWidgetmultipleTimesatonce【发布时间】：2020-07-1620:21:17【问题描述】：由于我在其他地方没有找到我的问题的任何答案，我会在这里尝试。我想显示多个小部... 查看详情

css动画之动画模块

...动画需要人为的去触发这个反应，而动画模块不需要人为相同点：都是动画；都是系统新增的属性；都是要满足三要素才有动画效果三要素：1.告诉系统执行哪个动画，要写出动画名称；animation-name:名称;2.告诉系统我们需要创建... 查看详情

为啥相同的 css 动画有时会不正确？

】为啥相同的css动画有时会不正确？【英文标题】：Whythesamecssanimationsometimesworksincorrect?为什么相同的css动画有时会不正确？【发布时间】：2019-05-0317:06:58【问题描述】：我使用css为div的大小设置动画。我需要div从其中心增大大... 查看详情

如何强制元素的 CSS 动画从与上一个动画完成的位置相同的位置开始？

】如何强制元素的CSS动画从与上一个动画完成的位置相同的位置开始？【英文标题】：HowcanIforceaCSSanimationofanelementtostartfromthesamelocationasthepreviousanimationfinished?【发布时间】：2022-01-0510:35:13【问题描述】：我有一个图像，我想在每... 查看详情

状态恢复后，dismissViewControllerAnimated 没有使用相同的动画

】状态恢复后，dismissViewControllerAnimated没有使用相同的动画【英文标题】：Afterstaterestoration,dismissViewControllerAnimatedisnotusingthesameanimation【发布时间】：2014-10-0916:57:25【问题描述】：我正在使用故事板实现一个iOS应用程序，其中一... 查看详情

使用animate.css[编辑]在第一个动画后重复相同的动画6s(代码片段)

我想在6秒后使用animate.css重复摇动动画一次。这是我到目前为止尝试过的代码。动画的第一部分很有效，但第二部分很有效。它只是没有。使用JavaScript，我可以在6秒后将setTimeout激活，删除摇动动画，然后将振动类添加回元素，... 查看详情

带有延迟和持续时间 Ios 的动画标签

】带有延迟和持续时间Ios的动画标签【英文标题】：AnimatingLabelswithdelayanddurationIos【发布时间】：2016-10-0306:33:13【问题描述】：所以我试图为标签设置动画，该标签将以文本开头，然后在一定时间后它会消失，新文本出现在屏幕... 查看详情

如何在带有动画的图像之间切换？

...，同时让这个新图像具有与最初通过情节提要加载的图像相同的aspectFit属性。这是我切换图像的代码，但它没有AspectFit。 查看详情

多个jquery动画以相同的速度和不同的高度同时完成动画

】多个jquery动画以相同的速度和不同的高度同时完成动画【英文标题】：Multiplejqueryanimate\'swithsamespeedanddifferentheight\'scompletetheanimationatthesametime【发布时间】：2012-02-0405:42:35【问题描述】：所以，我有多个速度相同但高度不同的jq... 查看详情

CAShapeLayer 动画的完成块

...将填充颜色从一种动画设置为另一种动画，然后再次调用相同的方法。它似乎几乎可以工作，但没有考虑持续时间。这是代码，也许你能帮忙？[CATransactionbeg 查看详情

在 Flutter 中重放相同的 Flare 动画

】在Flutter中重放相同的Flare动画【英文标题】：ReplayingthesameFlareanimationinFlutter【发布时间】：2019-08-1313:20:20【问题描述】：我正在尝试在Flutter中重新播放Flare动画。动画完成后不循环播放。我想要一个动画按需播放，相同的动画... 查看详情

iOS：UIView 动画，没有动画发生

...享代码。nib中有不同的布局，但视图和视图层次结构基本相同-一个UIView用作两个兄弟UITextView的容器。带有孩子的UIView主视图：UIText 查看详情

动效设计principle：动画介绍

...A当两个画板之间的事件被成功触发时，Principle会为名称相同的图层自动补全过渡动画效果，这个点非常关键，如果制作成功后，看不到对应的动画效果，务必检查两个画板之间的图层名称是否相同。看下图中的例子，画板1和2的... 查看详情

使用带有约束的持续时间动画快速移动按钮并在其中检测触摸

】使用带有约束的持续时间动画快速移动按钮并在其中检测触摸【英文标题】：Movingabuttoninswiftusinganimatewithdurationwithconstraintsanddetectingatouchduringit【发布时间】：2016-01-0202:02:17【问题描述】：我想将按钮从A点移动到B点。A点：leadi... 查看详情

如何快速制作带有约束的动画？

】如何快速制作带有约束的动画？【英文标题】：Howtomakeanimationwithconstrainsinswift?【发布时间】：2019-06-1607:39:02【问题描述】：当每个条形图为UIView时，我已经编写了一个条形图，并对其高度和超级视图的顶部约束进行了限制。... 查看详情

使用html和css实现轮播图的两种方法

...是，通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容若只将要显示的三张图片导入，会出现最后一张图片到第一张图片... 查看详情

一个接一个对象的相同动画

】一个接一个对象的相同动画【英文标题】：Sameanimationforobjectsoneafteranother【发布时间】：2020-03-2907:04:56【问题描述】：我的菜单中有一些按钮，它们都有相同的动画。我想在最后一个按钮动画开始播放后大约50毫秒播放每个按... 查看详情

带有渐变的CSS3动画[重复]

】带有渐变的CSS3动画[重复]【英文标题】：CSS3animationwithgradients[duplicate]【发布时间】：2011-08-0500:00:09【问题描述】：真的没有办法用CSS为渐变背景设置动画吗？类似：@-webkit-keyframespulse0%background:-webkit-gradient(linear,lefttop,leftbottom,c... 查看详情