【CSS3】スロットアニメーション

CSS3スロットマシーン！

by tea4two

HTML

<br /><br /><br />

<div id="machine">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</div>
<div id="navigation">
    <a href="#machine">Play</a>
    <!--a href="#reset">Reset</a-->
</div>

CSS

@-webkit-keyframes spin {
          0%   { background-position:0, 0 0; }
          100%  { background-position:0, 0 -640px; }
        }
        #machine { 
            width: 360px; 
            margin:auto; 
            padding:20px; 
            overflow:hidden; 
            background-color:#333; 
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#666666), color-stop(.6,#333)); 
            border-radius:10px; 
            }
#machine > #a {
-webkit-transition: background-position .7s;
} 
#machine > #b {
-webkit-transition: background-position 1.2s;
} 
#machine > #c {
-webkit-transition: background-position 1.6s;
}
        #machine > div {
            background-position:0, 0 0;
    float:left; 
            width:100px; 
            margin:10px; 
            height:160px; 
            background-color:#FFF; 
            background-position:0;
            background-image: 
                -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.6)), to(rgba(0,0,0,.6)), color-stop(.3,rgba(0,0,0,0)), color-stop(.7,rgba(0,0,0,0))), 
                url("http://snook.ca/technical/slots/slot.png");
            -webkit-border-radius:5px; border-radius:5px; 
            -webkit-box-shadow:0 0 5px #000 inset;
    
            
            }


/*ターゲットにされた時にスピン開始*/
#machine:target > div { 
    -webkit-animation: spin .7s infinite linear;
}
            
        /* style up the navigation */
        #navigation { margin:20px auto; width:150px; text-align:center; }
        #navigation a { 
            display:block; 
            padding:5px; 
            text-decoration:none;
            text-transform:uppercase;
            font-size:12px;
            font-weight:bold;
            color:#000;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC), to(#999) );
            -webkit-box-shadow:0 0 5px #000;
            -webkit-border-radius:5px; border-radius:5px;
            text-shadow:0 1px 1px #FFF;
            }
  ...