CSS3 Flip Animations

Question

I'm having trouble with a CSS3 flip animation I've been working on. I have thumbnail images on my web page, and when the page is loaded the images are supposed to flip around to reveal a description on the back. They then are supposed to look like normal images until they've been clicked, and that's when they flip around once again.

The problem is that only the descriptions are showing up (the actual animation is working), but not the thumbnail images. The page loads and the descriptions are backwards (due to the perspective), but they're supposed to be hidden.

Page: http://amurisen.com/katherine/photography.php (It should only work in Safari and Chrome)

HTML

    <div class="cssanimations">

<div id="s01" class="item"><div class="inner">
    <a href="#s01"><img src="photos/thumbs/thumb1.jpg" /></a>
        <div class="description"> <h3 class="fn">Photo 1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div>

<div id="s02" class="item"><div class="inner">
    <a href="#s02"><img src="photos/thumbs/thumb2.jpg" /></a>
        <div class="description"> <h3 class="fn">Photo 2</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div>

<div id="s03" class="item"><div class="inner">
    <a href="#s03"><img src="photos/thumbs/thumb3.jpg" /></a>
        <div class="description"> <h3 class="fn">Photo 3</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div>

<div id="s04" class="item"><div class="inner">
    <a href="#s04"><img src="photos/thumbs/thumb4.jpg" /></a>
        <div class="description"> <h3 class="fn">Photo 4</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div>

<div id="s05" class="item"><div class="inner">
    <a href="#s05"><img src="photos/thumbs/thumb5.jpg" /></a>
        <div class="description"> <h3 class="fn">Photo 5</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div>

<div id="s06" class="item"><div class="inner">
    <a href="#s06"><img src="photos/thumbs/thumb6.jpg" /></a>
        <div class="description"> <h3 class="fn">Photo 6</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div>

<div id="s07" class="item"><div class="inner">
    <a href="#s07"><img src="photos/thumbs/thumb7.jpg" /></a>
        <div class="description"> <h3 class="fn">Photo 7</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div>

<div id="s08" class="item"><div class="inner">
    <a href="#s08"><img src="photos/thumbs/thumb8.jpg" /></a>
        <div class="description"> <h3 class="fn">Photo 8</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div>

<div id="s09" class="item"><div class="inner">
    <a href="#s09"><img src="photos/thumbs/thumb9.jpg" /></a>
        <div class="description"> <h3 class="fn">Photo 9</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div>

<div id="s10" class="item"><div class="inner">
    <a href="#s10"><img src="photos/thumbs/thumb10.jpg" /></a>
        <div class="description"> <h3 class="fn">Photo 10</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis odio, pulvinar tincidunt dignissim a, posuere vestibulum turpis. Vivamus sapien libero, porta quis mattis id, pulvinar in ante. </p></div></div></div>

</div>

CSS

@-webkit-keyframes bookflip {
    0% { -webkit-transform : rotateY(0deg); }
    50% { -webkit-transform : rotateY(180deg); }
    100% { -webkit-transform : rotateY(0deg); }
    }

.cssanimations .item {
    -webkit-perspective: 400;
    float : left;
    position : relative;
    height : 150px;
    width : 224px;
    margin : 0 10px 10px 0;}

.cssanimations .item .description {
    font-size: 10px;
    position : absolute;
    width : 224px;
    height : 150px;
    padding : 3px;
    background-color : rgb(0,0,0);
    border : 3px solid rgb(0,0,0);
    -webkit-transform : rotateY(180deg);
    background-repeat : no-repeat;
    background-position: 4px 18px;
    background-size : 70px 47px;}

.cssanimations .item .description h3:before {
    content : url(images/idontevenknowanymore.png);
    display : block;
    float : left;
    width : 70px;
    height : 47px;
    margin : 0 10px 5px 0;
    border : 2px solid rgb(0,0,0);}

.cssanimations .item img {
    position : absolute;
    border : 3px solid rgb(0,0,0);
    -webkit-backface-visibility : hidden;}

.cssanimations .item .inner {
    -webkit-transform-style : preserve-3d;
    -webkit-transition-property : transform;
    -webkit-transition-duration : 1s;
    -webkit-animation-name : bookflip;
    -webkit-animation-duration : 2s;
    -webkit-animation-iteration-count : 1;
    -webkit-animation-timing-function : ease-in-out;}

.cssanimations .item:target .inner {
    -webkit-transform : rotateY(-180deg);}

.cssanimations .item#s01 .description {
    background-image : url(photos/smallthumbs/s01.jpg); }

.cssanimations .item#s02 .description {
    background-image : url(photos/smallthumbs/s02.jpg); }

.cssanimations .item#s03 .description {
    background-image : url(photos/smallthumbs/s03.jpg); }

.cssanimations .item#s04 .description {
    background-image : url(photos/smallthumbs/s04.jpg); }

.cssanimations .item#s05 .description {
    background-image : url(photos/smallthumbs/s05.jpg); }

.cssanimations .item#s06 .description {
    background-image : url(photos/smallthumbs/s06.jpg); }

.cssanimations .item#s07 .description {
    background-image : url(photos/smallthumbs/s07.jpg); }

.cssanimations .item#s08 .description {
    background-image : url(photos/smallthumbs/s08.jpg); }

.cssanimations .item#s09 .description {
    background-image : url(photos/smallthumbs/s09.jpg); }

.cssanimations .item#s10 .description {
    background-image : url(photos/smallthumbs/s10.jpg); }

.cssanimations .item#s11 .description {
    background-image : url(photos/smallthumbs/s11.jpg); }


.cssanimations .item#s01 .inner {
    -webkit-animation-delay : 1s;}

.cssanimations .item#s02 .inner {
    -webkit-animation-delay : 1.5s;}

.cssanimations .item#s03 .inner {
    -webkit-animation-delay : 2s;}

.cssanimations .item#s04 .inner {
    -webkit-animation-delay : 2.5s;}

.cssanimations .item#s05 .inner {
    -webkit-animation-delay : 3s;}

.cssanimations .item#s06 .inner {
    -webkit-animation-delay : 3.5s;}

.cssanimations .item#s07 .inner {
    -webkit-animation-delay : 4s;}

.cssanimations .item#s08 .inner {
    -webkit-animation-delay : 4.5s;}

Sorry if this is a lot to look through. Thanks!

Answer 1

Instead of keyframes, I'd use transitions. Have a look at the tutorial for this that I wrote: http://css3.bradshawenterprises.com/#flip – looks to be exactly what you are trying to do – knew someone would find it useful eventually!