CSS3 Animation - Delay, Stop, and Play

Question

I'm not very good at CSS3 animations, so I need help improving the output.

I am trying to achieve a Windows8 tile effect and I am almost ready.

I'm trying to achieve this

and here is jsfiddle

The CSS that flips is next.

The suffix "1" is for block 1, "2" for block 2, etc. "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 only one tile to flip at a time. Currently, I used different animation times, which look great, but a few fragments scroll at a time.

2- I want the animation of a particular tile to stop when the back side is shown, and then move to another plate, and when it comes again, the front side will appear again. Currently, it shows the front side, and then immediately shows the back side, and then pauses for a while.

Answer 1

For your first problem, you will want to use the alias :hover and, if necessary, also use tile-specific identifiers.

I don’t quite understand what you mean by “then move on to another tile, and when its turn comes again, the front side appears again”. But you have animation-iteration-count: set to infinite , so of course the animation will continue indefinitely.

It seems you still don't quite understand CSS animation / transitions. Perhaps you should practice just zooming in on the hover and then working your way up to creating just one window. W3Schools has an excellent link to CSS Animations .

Answer 2

Refer to this link. it helps you.

Link1

Link2

Link3

Link4