Question

我尝试用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>

彩色块的动画滞后于灰色块在Google Chrome中。在Safary和FF，它完美无缺。

我可以为@keyframes创建一个background，为transform创建一个animation，它可以解决问题。但是我想对单个元素使用moving属性的单个值。如果没有任何解决办法，我会将coloring和@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.search_and_add, menu); return true; }动画分开。

为什么会这样？这是谷歌Chrome的错误吗？

Answer 1

无法给出具体原因为什么会发生这种情况，但我们也可以通过简单地在动画B中指定.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); } }来解除对Chrome的混淆。

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

select * from 
( 
    select  id,version,dt_create,row_number() over (partition by id order by dt_create desc) as a
    from version_history (nolock) 
) b
where a=1
order by id

{{1}}

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

1 个答案: