CSS3 动画 - 延迟、停止和播放

Question

我不太擅长 CSS3 动画，所以我需要一些帮助来改进输出。

我正在尝试实现 Windows8 平铺效果，我快完成了。

我正在努力实现这一目标

这里是jsfiddle

翻转的CSS如下。

后缀 '1' 用于 block1 ，'2' 用于 block2 等等 'til 5 用于五个块。

/*block one*/

    .flip-container1, .front1, .back1 {
      position:relative;
      width: 432px;
      height: 140px;
    }

    .flipper1 {
      -webkit-transition: 0.6s;
      -webkit-transform-style: preserve-3d;

      -moz-transition: 0.6s;
      -moz-transform-style: preserve-3d;

      transition: 0.6s;
      transform-style: preserve-3d;

      position: relative;
    }

    .front1, .back1 {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      background: #2FB1BE;
    }



    .vertical1.flip-container1 {
      position: relative;
    }

      .vertical1 .back1 {
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        transform: rotateX(180deg);
      }

      .vertical1.flip-container1 .flipper1 {
        -webkit-transform-origin: 100% 70px;
        -moz-transform-origin: 100% 70px;
        transform-origin: 100% 70px;
      }
@keyframes myFirst{
        from{
        webkit-transform: rotateX(-180deg);
        -moz-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
      }
      to{
        webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        transform: rotateX(180deg);
      }
  }
  @-webkit-keyframes myFirst{
    from{
        webkit-transform: rotateX(-180deg);
        -moz-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
      }
      to{
        webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        transform: rotateX(180deg);
      }
  }
  .vertical1.flip-container1 .flipper1{
    animation:myFirst 3s;
    -webkit-animation:myFirst 3s;
    animation-direction:normal;
    -webkit-animation-direction:normal;
    animation-iteration-count:infinite;
  }

现在我要解决以下两个问题：

1- 我希望一次只翻转一个图块。 目前，我应用了不同的动画时间，看起来不错，但一次翻转多个图块。

2- 我希望特定图块的动画在显示背面时停止，然后移动到另一个图块，当再次轮到它时，再次显示正面。目前显示正面，然后立即显示背面，然后暂停一段时间。

Answer 1

对于您的第一个问题，您需要使用 :hover 伪标签，如果需要，还可以使用特定于图块的 id。

我不太明白您所说的“然后移动到另一个图块，当再次轮到它时，再次显示正面”是什么意思。但是，您将animation-iteration-count: 设置为infinite，所以动画当然会无限继续。

您似乎还没有完全理解 CSS 动画/过渡。也许你应该练习让一个盒子在鼠标悬停时增长，然后努力让你只翻转 1 个盒子。 W3Schools 对CSS Animations 有很好的参考。