Question

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

我正在尝试实现Windows8磁贴效果，我差不多完成了。

我正在努力实现这一目标 enter image description here

翻转的CSS如下。

后缀'1'用于block1，'2'用于block2，依此类推'至5为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。

Answer 2

请参阅此链接。它会帮助你。

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

2 个答案: