Displaying one card at a time

HTML & CSS
1

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

2

Hi,

Did you mean something like this effect.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul{margin:0;padding:0;list-style:none}
#card-layout li{
	width:50px;
	height:100px;
	background:red;
	border-radius:10px;
	border:1px solid #00;
	float:left;
	margin:5px;
	opacity:0;
  -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; }
}


</style>
</head>

<body>
<div id="card-layout">
		<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
		</ul>
</div>
</body>
</html>

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

3

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:

4

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:

5

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?

6

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+ */
}

:slight_smile:

7

Many thanks ronpat! G :slight_smile:

8