Poker Playing Cards CSS Animation

Sat, 03 Mar 2018 02:06:32 +0000

.ani-box {width: 100%; height: 620px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%234d741f' fill-opacity='0.35' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E"); } #slot-view { margin: -1.2em auto 0px auto; background-color: #339933; border: 25px ridge #333333; border-radius: 20px; width: 820px; height: 450px; position: relative; box-sizing: content-box; } @media screen and (max-width: 1100px) { #slot-view {transform: scale(0.8);} } /* ====== Animation Start ====== */ #vp { margin: 0.5em auto 1em auto; width: 80%; position: relative; color: #666666; } #vp p { margin: 0px auto 0px auto; width: 100%; text-align: center; font-size: 1.6em; line-height: 1.4em; } #vp a {font-weight: bold;} /* ====== Play Again button ======== */ #reload { margin: 0.7em auto; width: 150px; font-size: 20px; color: #000; line-height: 1.2em; text-align: center; background-color: #0aac8e; border: 3px solid #999; font-weight: bold; text-decoration: none; position: relative; animation: exit2 31s; padding: 0 7px; } #reload:hover {background-color:#FFF; color: #0aac8e; border-color: #000;} @keyframes exit2 { 0% {opacity:0;} 100%{opacity:0;} } /* Define card appearance - size and location */ #hearts2, #hearts3, #hearts4, #hearts5, #hearts6, #hearts7, #hearts8, #hearts9, #heartsx, #heartsj, #heartsq, #heartsk, #heartsa { margin-left: 35px; margin-top: 0px; background-repeat: no-repeat; width: 120px; height: 180px; position: absolute; border-radius: 10px; border: 3px solid #000000; visibility: hidden; } /* Sequence One: Spread out the Deck - Define EAch card and Assign Animation Keyframe */ #hearts2 {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/2-hearts.jpg'); animation: hearts2-spread 8s;} #hearts3 {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/3-hearts.jpg'); animation: hearts3-spread 8s;} #hearts4 {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/4-hearts.jpg'); animation: hearts4-spread 8s;} #hearts5 {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/5-hearts.jpg'); animation: hearts5-spread 8s;} #hearts6 {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/6-hearts.jpg'); animation: hearts6-spread 8s;} #hearts7 {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/7-hearts.jpg'); animation: hearts7-spread 8s;} #hearts8 {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/8-hearts.jpg'); animation: hearts8-spread 8s;} #hearts9 {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/9-hearts.jpg'); animation: hearts9-spread 8s;} #heartsx {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/10-hearts.jpg'); animation: heartsx-spread 8s;} #heartsj {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/j-hearts.jpg'); animation: heartsj-spread 8s;} #heartsq {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/q-hearts.jpg'); animation: heartsq-spread 8s;} #heartsk {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/k-hearts.jpg'); animation: heartsk-spread 8s;} #heartsa {background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/a-hearts.jpg'); animation: heartsa-spread 8s;} /* Sequrnce One: SPREAD cARDS OUT Animation Keyframes for EAch card */ @keyframes hearts2-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate( 0px,0px) rotateY(90deg); visibility: visible;} } @keyframes hearts3-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate(45px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate(45px,0px) rotateY(90deg); visibility: visible;} } @keyframes hearts4-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate(90px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate(90px,0px) rotateY(90deg); visibility: visible;} } @keyframes hearts5-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate(135px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate(135px,0px) rotateY(90deg); visibility: visible;} } @keyframes hearts6-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate(180px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate(180px,0px) rotateY(90deg); visibility: visible;} } @keyframes hearts7-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate(225px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate(225px,0px) rotateY(90deg); visibility: visible;} } @keyframes hearts8-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate(270px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate(270px,0px) rotateY(90deg); visibility: visible;} } @keyframes hearts9-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate(315px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate(315px,0px) rotateY(90deg); visibility: visible;} } @keyframes heartsx-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate(360px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate(360px,0px) rotateY(90deg); visibility: visible;} } @keyframes heartsj-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate(405px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate(405px,0px) rotateY(90deg); visibility: visible;} } @keyframes heartsq-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate(450px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate(450px,0px) rotateY(90deg); visibility: visible;} } @keyframes heartsk-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;} 85% {transform:translate(495px,0px) rotateY( 0deg); visibility: visible;} 100%{transform:translate(495px,0px) rotateY(90deg); visibility: visible;} } @keyframes heartsa-spread { 0% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 20% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 85% {transform:translate(540px,0px) rotateY( 0deg); visibility:visible;} 100%{transform:translate(540px,0px) rotateY(90deg); visibility:visible;} } /* END Sequence One */ /* START Sequence Two: Flipping the Spreadout Deck Over to the backs */ /* Define cArds backs Appearance and Location */ .backa, .backk, .backq, .backj, .backx, .back9, .back8, .back7, .back6, .back5, .back4, .back3, .back2 { margin-left:35px; top: 20px; background-repeat: no-repeat; width: 120px; height: 180px; position: absolute; border-radius: 10px; border: 3px solid #000000; visibility: hidden; background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/back.jpg'); } /* Assign card backs images and Assign Animation Keyframes */ .backa {animation: flip-backa 15s;} .backk {animation: flip-backk 15s;} .backq {animation: flip-backq 15s;} .backj {animation: flip-backj 15s;} .backx {animation: flip-backx 15s;} .back9 {animation: flip-back9 15s;} .back8 {animation: flip-back8 15s;} .back7 {animation: flip-back7 15s;} .back6 {animation: flip-back6 15s;} .back5 {animation: flip-back5 15s;} .back4 {animation: flip-back4 15s;} .back3 {animation: flip-back3 15s;} .back2 {animation: flip-back2 15s;}

/* Sequence Two: FLIP cARD OVER Animation Keyframes */ @keyframes flip-backa { 0% {transform:translate(540px,0px) rotateY( 0deg); visibility: hidden; border-right:3px solid #000000;} 50% {transform:translate(540px,0px) rotateY(-90deg); visibility: hidden; border-right:3px solid #000000;} 72% {transform:translate(540px,0px) rotateY( 0deg); visibility:visible; border-right:3px solid #000000;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible; border-right:9px solid #000000;} 95 {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible; border-right:9px solid #000000;} 100% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible; border-right:9px solid #000000;} } @keyframes flip-backk { 0% {transform:translate(495px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(495px,0px) rotateY(-90deg); visibility: hidden;} 71% {transform:translate(495px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 100%{transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} } @keyframes flip-backq { 0% {transform:translate(450px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(450px,0px) rotateY(-90deg); visibility: hidden;} 70% {transform:translate(450px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 100% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} } @keyframes flip-backj { 0% {transform:translate(405px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(405px,0px) rotateY(-90deg); visibility: hidden;} 69% {transform:translate(405px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 100% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} } @keyframes flip-backx { 0% {transform:translate(360px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(360px,0px) rotateY(-90deg); visibility: hidden;} 68% {transform:translate(360px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 100% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} } @keyframes flip-back9 { 0% {transform:translate(315px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(315px,0px) rotateY(-90deg); visibility: hidden;} 67% {transform:translate(315px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 100% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} } @keyframes flip-back8 { 0% {transform:translate(270px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(270px,0px) rotateY(-90deg); visibility: hidden;} 66% {transform:translate(270px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 100% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} } @keyframes flip-back7 { 0% {transform:translate(225px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(225px,0px) rotateY(-90deg); visibility: hidden;} 65% {transform:translate(225px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 100% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} } @keyframes flip-back6 { 0% {transform:translate(180px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(180px,0px) rotateY(-90deg); visibility: hidden;} 64% {transform:translate(180px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 100% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} } @keyframes flip-back5 { 0% {transform:translate(135px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(135px,0px) rotateY(-90deg); visibility: hidden;} 63% {transform:translate(135px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 100% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} } @keyframes flip-back4 { 0% {transform:translate(90px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(90px,0px) rotateY(-90deg); visibility: hidden;} 62% {transform:translate(90px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 100% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} } @keyframes flip-back3 { 0% {transform:translate(45px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(45px,0px) rotateY(-90deg); visibility: hidden;} 61% {transform:translate(45px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} 100% {transform:translate( 0px,0px) rotateY( 0deg); visibility:visible;} } @keyframes flip-back2 { 0% {transform:translate(0px,0px) rotateY( 0deg); visibility: hidden;} 50% {transform:translate(0px,0px) rotateY(-90deg);visibility: hidden;} 60% {transform:translate(0px,0px) rotateY( 0deg); visibility:visible;} 90% {transform:translate(0px,0px) rotateY( 0deg); visibility:visible;} 100% {transform:translate(0px,0px) rotateY( 0deg); visibility:visible;} } /* END Sequence Two */ /* Define deck for dealing - Just placing a deck here to deal from */ .deck { margin-left:35px; top: 20px; background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/back.jpg'); background-repeat: no-repeat; width: 120px; height: 180px; position: absolute; border-radius: 10px; border: 3px solid #000000; border-right:9px solid #000000; visibility:visible; animation: deck 15s; box-sizing: content-box; } /* hide and show deck for deal */ @keyframes deck { 0% {visibility: hidden;} 100%{visibility: hidden;} } /* Done with Deck Placment */ /* START Sequence Three: Dealing the cards from the Deck above */ /* Define cards for deal - placement and Appearance of the cards that will be dealt - could have been added above to save lines */ .deal1, .deal2, .deal3, .deal4, .deal5 { margin-left:35px; top: 20px; background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/back.jpg'); background-repeat: no-repeat; width: 120px; height: 180px; position: absolute; border-radius: 10px; border: 3px solid #000000; } .deal1, .deal2, .deal3, .deal4, .deal5 {visibility: hidden;} /* Define and Assign dealing cards with Animation Keyframes */ .deal1 {animation: deal1 25s;} .deal2 {animation: deal2 26s;} .deal3 {animation: deal3 27s;} .deal4 {animation: deal4 28s;} .deal5 {animation: deal5 29s;} /* Dealing cards Animation Keyframes */ @keyframes deal1 { 0% {transform:translate( px, 0px) rotateZ( 0deg) rotateX( 0deg); visibility: hidden;} 55% {transform:translate(0px, 0px) rotateZ( 0deg) rotateX( 0deg); visibility: hidden;} 57% {transform:translate(0px,210px) rotateZ(180deg) rotateX( 0deg); visibility:visible;} 97% {transform:translate(0px,210px) rotateZ(180deg) rotateX( 0deg); visibility:visible;} 100%{transform:translate(0px,210px) rotateZ(180deg) rotateX(90deg); visibility:visible;} } @keyframes deal2 { 0% {transform:translate(0px,0px) rotateZ( 0deg) rotateX( 0deg); visibility: hidden;} 58% {transform:translate(0px,0px) rotateZ( 0deg) rotateX( 0deg); visibility: hidden;} 60% {transform:translate(150px,210px) rotateZ(360deg) rotateX( 0deg); visibility:visible;} 97% {transform:translate(150px,210px) rotateZ(360deg) rotateX( 0deg); visibility:visible;} 100%{transform:translate(150px,210px) rotateZ(360deg) rotateX(90deg); visibility:visible;} } @keyframes deal3 { 0% {transform:translate(0px,0px) rotateZ( 0deg) rotateX( 0deg); visibility: hidden;} 61% {transform:translate(0px,0px) rotateZ( 0deg) rotateX( 0deg); visibility: hidden;} 63% {transform:translate(300px,210px) rotateZ(360deg) rotateX( 0deg); visibility:visible;} 97% {transform:translate(300px,210px) rotateZ(360deg) rotateX( 0deg); visibility:visible;} 100%{transform:translate(300px,210px) rotateZ(360deg) rotateX(90deg); visibility:visible;} } @keyframes deal4 { 0% {transform:translate(0px,0px) rotateZ( 0deg) rotateX( 0deg); visibility: hidden;} 64% {transform:translate(0px,0px) rotateZ( 0deg) rotateX( 0deg); visibility: hidden;} 66% {transform:translate(450px,210px) rotateZ(540deg) rotateX( 0deg); visibility:visible;} 97% {transform:translate(450px,210px) rotateZ(540deg) rotateX( 0deg); visibility:visible;} 100%{transform:translate(450px,210px) rotateZ(540deg) rotateX(90deg); visibility:visible;} } @keyframes deal5 { 0% {transform:translate(0px,0px) rotateZ( 0deg) rotateX( 0deg); visibility: hidden;} 67% {transform:translate(0px,0px) rotateZ( 0deg) rotateX( 0deg); visibility: hidden;} 70% {transform:translate(600px,210px) rotateZ(720deg) rotateX( 0deg); visibility:visible;} 97% {transform:translate(600px,210px) rotateZ(720deg) rotateX( 0deg); visibility:visible;} 100%{transform:translate(600px,210px) rotateZ(720deg) rotateX( 90deg); visibility:visible;} } /* END Sequence Three */ /* START Sequence Four: Flipping the Dealt cards */ /* Define Dealth cards with Images and Assign Keyframes (Location and Appearance on line 429 to save repeatative coding */ .dealt1, .dealt2, .dealt3, .dealt4, .dealt5 { top: 230px; width: 120px; height: 180px; position: absolute; border-radius: 10px; border: 2px solid #000000; visibility:visible; } .dealt1 { background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/10-hearts.jpg'); margin-left: 30px; animation: dealt1 40s; } .dealt2 { background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/j-hearts.jpg'); margin-left:180px; animation: dealt2 40s; } .dealt3 { background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/q-hearts.jpg'); margin-left: 330px; animation: dealt3 40s; } .dealt4 { background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/k-hearts.jpg'); margin-left: 480px; animation: dealt4 40s; } .dealt5 { background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/poker/cards/a-hearts.jpg'); margin-left: 630px; animation: dealt5 40s; } /* Keyframes for Sequence Four: Flipping or turning over the Dealt cards */ @keyframes dealt1 { 0% {transform:rotateX(-90deg); visibility:hidden;} 62% {transform:rotateX(-90deg); visibility:hidden;} 64% {transform:rotateX( 0deg); visibility:visible;} 100%{transform:rotateX( 0deg); visibility:visible;} } @keyframes dealt2 { 0% {transform:rotateX(-90deg); visibility:hidden;} 65% {transform:rotateX(-90deg); visibility:hidden;} 67% {transform:rotateX( 0deg); visibility:visible;} 100%{transform:rotateX( 0deg); visibility:visible;} } @keyframes dealt3 { 0% {transform:rotateX(-90deg); visibility:hidden;} 67% {transform:rotateX(-90deg); visibility:hidden;} 69% {transform:rotateX( 0deg); visibility:visible;} 100%{transform:rotateX( 0deg); visibility:visible;} } @keyframes dealt4 { 0% {transform:rotateX(-90deg); visibility:hidden;} 70% {transform:rotateX(-90deg); visibility:hidden;} 72% {transform:rotateX( 0deg); visibility:visible;} 100%{transform:rotateX( 0deg); visibility:visible;} } @keyframes dealt5 { 0% {transform:rotateX(-90deg); visibility:hidden;} 72% {transform:rotateX(-90deg); visibility:hidden;} 74% {transform:rotateX( 0deg); visibility:visible;} 100%{transform:rotateX( 0deg); visibility:visible;} } /* END Sequence Four */ @media screen and (max-width: 765px) { #slot-view { transform: scale(0.7); transform-origin: center top; left: -10% } } @media screen and (max-width: 600px) { #slot-view { transform: scale(0.5); transform-origin: center top; left: -20%; } } @media screen and (max-width: 480px) { #slot-view { transform: scale(0.3); transform-origin: center top; left: -30%; } } .ad-center {text-align: center; width: 80%; margin: 0 auto; border: position: relative; height: 130px;}

Looking for FREE Non-Gambling Vegas Style Poker & Keno Games?
Try Video Poker.com

CSS3 Animation Demo of Poker Playing Cards in Action

]]>

cards – Thingography.com

Poker Playing Cards CSS Animation