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

我不是很擅长CSS3动画，所以我需要一些帮助来提高输出。CSS3动画 - 延迟，停止和播放

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

我想实现这个 enter image description here

其翻转是如下的CSS。

后缀'1'表示块1，'2'表示块2，以此类推'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-我希望在显示背面时停止显示某个特定瓷砖的动画，然后移动到另一个瓷砖上，然后再次显示其正面，然后再显示正面。目前，它显示正面，然后立即显示背面，然后暂停一段时间。

来源

2013-08-02 Insane Coder

对于第一个问题，您需要使用:hover伪标记，如果需要，还可以使用特定于磁贴的ID。

我不太明白你的意思，然后移动到另一个瓷砖，当它再次出现，然后正面再次显示“。但是，你有animation-iteration-count:设置为infinite，所以动画当然会无限地继续。

看来你还不完全理解CSS动画/转换。也许你应该练习一下，让鼠标悬停在一个盒子上，然后按照你的方式制作一个盒子。 W3Schools有很大的参考CSS Animations。

来源

2013-08-03 03:20:29 JesseG17

：让我来解释一下clearly.Suppose我有2个瓷砖和瓷砖每一个都有两面性SIDE1和side2.Currently，无论砖展示side1（正面）。现在，**，然后移动到另一个瓷砖，当它再次出现，然后正面再次显示**我的意思是第一个瓷砖显示side2，然后第二个瓷砖显示side2，t母鸡第一张牌显示side1，然后第二张显示side1，然后先显示side2，然后第二张side2等。 –