CSS3 animations - delay, stop and play - html

Question

I am not very good at CSS3 animations so I need some help to improve the output.
I am trying to achieve the Windows8 tile effect and I am nearly done.
I am trying to achieve this
and here is the jsfiddle
The CSS which flips is the following.
The suffix '1' is for block1 ,'2' for block2 and so on 'til 5 for five blocks.
/*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;
}
Now I want to solve the following two problems:
1- I want that only one tile flips at a time.
Currently, I have applied different animation times which looks fine but multiple tiles are flipping at a time.
2- I want the animation of a particular tile to stop when the backside is shown and then move to another tile and when again its turn comes then front side is shown again. Currently, it shows front side and then immediately shows back side and then pauses for a while.

Answer 1

For your first problem, you'll want to use the :hover pseudo tag, and if needed also use tile-specific ids.
I don't quite understand what you mean by "then move to another tile and when again its turn comes then front side is shown again". But, you have animation-iteration-count: set to infinite so of course the animation will continue on infinitely.
It seems you don't quite understand CSS animations/transitions fully yet. Perhaps you should practice with just making a box grow on mouse hover, then work your way up to making just 1 box flip. W3Schools has a great reference to CSS Animations.