Displaying one card at a time

Hi! I’m not sure if this is a CSS or JS query!

I have part of a tarot readings site at http://gandalf458.co.uk/tarot/ - the style sheet is http://gandalf458.co.uk/tarot/styles.css

When displaying the deck I should like to have a delay between each card appearing. I don’t know if this is possible. Any ideas please? Thanks


Did you mean something like this effect.

<meta charset="utf-8">
<title>Untitled Document</title>
#card-layout li{
	border:1px solid #00;
  -webkit-animation: cardflip 1s  ease-in forwards ; /* Safari 4+ */
  -moz-animation:    cardflip 1s ease-in forwards; /* Fx 5+ */
  -o-animation:      cardflip 1s ease-in forwards; /* Opera 12+ */
  animation:         cardflip 1s ease-in forwards; /* IE 10+ */

#card-layout li:nth-child(1){-webkit-animation-delay:1s;-moz-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s}
#card-layout li:nth-child(2){-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}
#card-layout li:nth-child(3){-webkit-animation-delay:3s;-moz-animation-delay:3s;-o-animation-delay:3s;animation-delay:3s}
#card-layout li:nth-child(4){-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}
#card-layout li:nth-child(5){-webkit-animation-delay:5s;-moz-animation-delay:5s;-o-animation-delay:5s;animation-delay:5s}

@-webkit-keyframes cardflip {
  0%   { opacity: 0; }
  100% { opacity: 1; }
@-moz-keyframes cardflip {
  0%   { opacity: 0; }
  100% { opacity: 1; }
@-o-keyframes cardflip {
  0%   { opacity: 0; }
  100% { opacity: 1; }
@keyframes cardflip {
  0%   { opacity: 0; }
  100% { opacity: 1; }


<div id="card-layout">

You would have to do that for each of the cards and delay each card as appropriate.

Yes, that’s it! Many thanks Paul. It’s going to take a lot of extra code to do it for 78 cards but that’s what I want. Cheers :slight_smile:

Maybe that’s a job for Sass or automate it with js but I’d still find it quicker to copy and paste :slight_smile:

Copy and paste it is! Not so long. http://gandalf458.co.uk/tarot/page1.php The <li> are created in PHP anyway.

One other thing. On my original I have the cards (sort-of) overlapping which I’ve done using a class which only shows 30px. I would like to show the whole card and literally overlap them. I’ve played with various options without luck. Can it be done?

Try this:

ul {
    margin: 0;
    padding: 1px 0 0 18px;    /* added padding top and left.  positive value same as negative margins in li. */
    list-style: none;
#card-layout li {
    width: 67px;    /* was 50px */
    height: 100px;
    background: url(images/cardback.jpg);
    border-radius: 6px;    /* was 5px */
    border: 1px solid blue;    /* added a visible border; optional */
    float: left;
    margin: -1px 0 0 -18px;    /* added negative margin-left (makes the cards overly). If border is not used, change margin-top back to zero. */
    opacity: 0;
    -webkit-animation: cardflip .5s ease-in forwards; /* Safari 4+ */
    -moz-animation:    cardflip .5s ease-in forwards; /* Fx 5+ */
    -o-animation:      cardflip .5s ease-in forwards; /* Opera 12+ */
    animation:         cardflip .5s ease-in forwards; /* IE 10+ */


Many thanks ronpat! G :slight_smile: