Tiffany's Game

by raad

HTML

<div id="container">
    
<h1>Revealing CSS3 Animation</h1>

    <p>find the matching animations by clicking on the shapes below!</p>
    <div class="background">
        <div class="shape" id="img"></div>
        <div class="shape" id="img2"></div>
        <div class="shape" id="img3"></div>
        <div class="shape" id="img4"></div>
        <div class="shape" id="img5"></div>
        <div class="shape" id="img6"></div>
        <div class="shape" id="img7"></div>
        <div class="shape" id="img8"></div>
        <div class="shape" id="img9"></div>
    </div>
    <div class="winnerpieces">
        <div class="winner" id="winner1"></div>
        <div class="winner" id="winner2"></div>
        <div class="winner" id="winner3"></div>
    </div>
</div>

CSS

body {
    background: url("http://tasdesigns.ca/images/tasbackground.jpg") no-repeat fixed center center / cover rgba(0, 0, 0, 0);
    text-align: center;
}
h1 {
    font-size: 18px;
}
#container {
    height: 100%;
    margin: auto;
    overflow: hidden;
    width: 225px;
}
.background {
    background-image: url("http://tasdesigns.ca/tutorials/revealanimation/img/Tic_Tac.png");
    height: 215px;
    overflow: hidden;
    width: 225px;
    z-index: 1;
}
.winnerpieces {
    height: 48px;
    position: relative;
    top: -200px;
    width: 225px;
    z-index: -1;
}
/* our shape class */
.shape{
    background-image: url("http://tasdesigns.ca/tutorials/revealanimation/img/Layer_3_copy_2.png");
    float: left;
    height: 55px;
    margin: 10px;
    width: 53px;
    z-index: 1;
}
/* our winner class */
.winner {
    animation: 5s linear 0s normal none infinite running turninspin;
    background-image: url("http://tasdesigns.ca/tutorials/revealanimation/img/Layer_2_copy_2.png");
    float: left;
    height: 25px;
    position: relative;
    width: 25px;
    z-index: -1;
}
/* below we define the placement of each winner object */
#winner1 {
    left: 23px;
    top: 10px;
}
#winner2 {
    left: 72px;
    top: 85px;
}
#winner3 {
    left: 120px;
    top: 161px;
}
.classname {
    animation: 2s linear 0s normal forwards 1 running sratchinwin;
}
@keyframes sratchinwin {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes turninspin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

JavaScript

// get all the html objects with the "shape" class applied to them
var shapes = document.getElementsByClassName('shape');

// loop round the list of "shape" objects
for (i=0; i < shapes.length; i++) {
    // attach a "click" handler
    shapes[i].addEventListener("click", function(e) {
        // set the classes to "shape" and "classname", in effect
        // adding the "classname" class
        this.className = "shape classname";
  });
}