{"id":1640,"date":"2018-03-03T02:06:32","date_gmt":"2018-03-03T02:06:32","guid":{"rendered":"http:\/\/thingography.com\/?p=1640"},"modified":"2025-02-13T21:01:44","modified_gmt":"2025-02-13T21:01:44","slug":"css-poker","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-poker\/","title":{"rendered":"Poker Playing Cards CSS Animation"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height: 620px;\nbackground-color: #ffffff;\nbackground-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\");\n}\n#slot-view {\n\tmargin: -1.2em auto 0px auto;\n\tbackground-color: #339933;\n\tborder: 25px ridge #333333;\n\tborder-radius: 20px;\n\twidth: 820px;\n\theight: 450px;\n\tposition: relative;\nbox-sizing: content-box;\n}\n@media screen and (max-width: 1100px) {\n    #slot-view  {transform: scale(0.8);}\n}\n\/*  ====== Animation Start  ======  *\/\n#vp {\n\tmargin: 0.5em auto 1em auto;\n\twidth: 80%;\n\tposition: relative;\n\tcolor: #666666;\n}\n#vp p {\n\tmargin: 0px auto 0px auto;\n\twidth: 100%;\n\ttext-align: center;\n\tfont-size: 1.6em;\n\tline-height: 1.4em;\n}\n#vp a {font-weight: bold;}\n\/*  ====== Play Again button ========  *\/\n#reload {\nmargin: 0.7em auto;\t\t\t\n\twidth: 150px;\n\tfont-size: 20px;\n\tcolor: #000;\nline-height: 1.2em;\n\ttext-align: center;\n\tbackground-color: #0aac8e;\n\tborder: 3px solid #999;\n\tfont-weight: bold;\n\ttext-decoration: none;\n\tposition: relative;\n\tanimation: exit2 31s;\n\tpadding: 0 7px;\n}\n#reload:hover {background-color:#FFF; color: #0aac8e; border-color: #000;}\n@keyframes exit2 {\n\t0%  {opacity:0;}\n\t100%{opacity:0;}\n}\n\/* Define card appearance - size and location *\/\n#hearts2, #hearts3, #hearts4, #hearts5, #hearts6, #hearts7, #hearts8, #hearts9, #heartsx, #heartsj, #heartsq, #heartsk, #heartsa   {\n\tmargin-left: 35px;\n\tmargin-top: 0px;\n\tbackground-repeat: no-repeat;\n\twidth: 120px;\n\theight: 180px;\n\tposition: absolute;\n\tborder-radius: 10px;\n\tborder: 3px solid #000000;\n\tvisibility: hidden;\n}\n\/* Sequence One: Spread out the Deck - Define EAch card and Assign Animation Keyframe *\/\n#hearts2 {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/2-hearts.jpg'); animation: hearts2-spread 8s;}\n#hearts3 {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/3-hearts.jpg'); animation: hearts3-spread 8s;}\n#hearts4 {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/4-hearts.jpg'); animation: hearts4-spread 8s;}\n#hearts5 {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/5-hearts.jpg'); animation: hearts5-spread 8s;}\n#hearts6 {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/6-hearts.jpg'); animation: hearts6-spread 8s;}\n#hearts7 {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/7-hearts.jpg'); animation: hearts7-spread 8s;}\n#hearts8 {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/8-hearts.jpg'); animation: hearts8-spread 8s;}\n#hearts9 {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/9-hearts.jpg'); animation: hearts9-spread 8s;}\n#heartsx {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/10-hearts.jpg'); animation: heartsx-spread 8s;}\n#heartsj {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/j-hearts.jpg'); animation: heartsj-spread 8s;}\n#heartsq {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/q-hearts.jpg'); animation: heartsq-spread 8s;}\n#heartsk {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/k-hearts.jpg'); animation: heartsk-spread 8s;}\n#heartsa {background-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/a-hearts.jpg'); animation: heartsa-spread 8s;}\n\/* Sequrnce One: SPREAD cARDS OUT Animation Keyframes for EAch card *\/\n@keyframes hearts2-spread {\n0%  {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate( 0px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes hearts3-spread {\n0%  {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate(45px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate(45px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes hearts4-spread {\n0%  {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate( 0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate(90px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate(90px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes hearts5-spread {\n0%  {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate(135px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate(135px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes hearts6-spread {\n0%  {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate(180px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate(180px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes hearts7-spread {\n0%  {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate(225px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate(225px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes hearts8-spread {\n0%  {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate(270px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate(270px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes hearts9-spread {\n0%  {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate(315px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate(315px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes heartsx-spread {\n0%  {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate(360px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate(360px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes heartsj-spread {\n0%  {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate(405px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate(405px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes heartsq-spread {\n0%  {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate(450px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate(450px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes heartsk-spread {\n0%  {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n20% {transform:translate(  0px,0px) rotateY( 0deg); visibility: visible;}\n85% {transform:translate(495px,0px) rotateY( 0deg); visibility: visible;}\n100%{transform:translate(495px,0px) rotateY(90deg); visibility: visible;}\n}\n@keyframes heartsa-spread {\n0%  {transform:translate(  0px,0px) rotateY( 0deg); visibility:visible;}\n20% {transform:translate(  0px,0px) rotateY( 0deg); visibility:visible;}\n85% {transform:translate(540px,0px) rotateY( 0deg); visibility:visible;}\n100%{transform:translate(540px,0px) rotateY(90deg); visibility:visible;}\n}\n\/* END Sequence One *\/\n\/* START Sequence Two: Flipping the Spreadout Deck Over to the backs *\/\n\/* Define cArds backs Appearance and Location *\/\n.backa, .backk, .backq, .backj, .backx, .back9, .back8, .back7, .back6, .back5, .back4, .back3, .back2   {\n\tmargin-left:35px;\n\ttop: 20px;\n\tbackground-repeat: no-repeat;\n\twidth: 120px;\n\theight: 180px;\n\tposition: absolute;\n\tborder-radius: 10px;\n\tborder: 3px solid #000000;\n\tvisibility: hidden;\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/back.jpg');\n}\n\/* Assign card backs images and Assign Animation Keyframes *\/\n.backa {animation: flip-backa 15s;}\n.backk {animation: flip-backk 15s;}\n.backq {animation: flip-backq 15s;}\n.backj {animation: flip-backj 15s;}\n.backx {animation: flip-backx 15s;}\n.back9 {animation: flip-back9 15s;}\n.back8 {animation: flip-back8 15s;}\n.back7 {animation: flip-back7 15s;}\n.back6 {animation: flip-back6 15s;}\n.back5 {animation: flip-back5 15s;}\n.back4 {animation: flip-back4 15s;}\n.back3 {animation: flip-back3 15s;}\n.back2 {animation: flip-back2 15s;}<\/p>\n<p>\/* Sequence Two: FLIP cARD OVER Animation Keyframes *\/\n@keyframes flip-backa {\n0%   {transform:translate(540px,0px) rotateY(  0deg); visibility: hidden; border-right:3px solid #000000;}\n50%  {transform:translate(540px,0px) rotateY(-90deg); visibility: hidden; border-right:3px solid #000000;}\n72%  {transform:translate(540px,0px) rotateY(  0deg); visibility:visible; border-right:3px solid #000000;}\n90%  {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible; border-right:9px solid #000000;}\n95   {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible; border-right:9px solid #000000;}\n100% {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible; border-right:9px solid #000000;}\n}\n@keyframes flip-backk {\n0%  {transform:translate(495px,0px) rotateY(  0deg);  visibility: hidden;}\n50% {transform:translate(495px,0px) rotateY(-90deg);  visibility: hidden;}\n71% {transform:translate(495px,0px) rotateY(  0deg);  visibility:visible;}\n90% {transform:translate(  0px,0px) rotateY(  0deg);  visibility:visible;}\n100%{transform:translate(  0px,0px) rotateY(  0deg);  visibility:visible;}\n}\n@keyframes flip-backq {\n0%   {transform:translate(450px,0px) rotateY(  0deg); visibility: hidden;}\n50%  {transform:translate(450px,0px) rotateY(-90deg); visibility: hidden;}\n70%  {transform:translate(450px,0px) rotateY(  0deg); visibility:visible;}\n90%  {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n100% {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n}\n@keyframes flip-backj {\n0%   {transform:translate(405px,0px) rotateY(  0deg); visibility: hidden;}\n50%  {transform:translate(405px,0px) rotateY(-90deg); visibility: hidden;}\n69%  {transform:translate(405px,0px) rotateY(  0deg); visibility:visible;}\n90%  {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n100% {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n}\n@keyframes flip-backx {\n0%   {transform:translate(360px,0px) rotateY(  0deg); visibility: hidden;}\n50%  {transform:translate(360px,0px) rotateY(-90deg); visibility: hidden;}\n68%  {transform:translate(360px,0px) rotateY(  0deg); visibility:visible;}\n90%  {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n100% {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n}\n@keyframes flip-back9 {\n0%   {transform:translate(315px,0px) rotateY(  0deg); visibility: hidden;}\n50%  {transform:translate(315px,0px) rotateY(-90deg); visibility: hidden;}\n67%  {transform:translate(315px,0px) rotateY(  0deg); visibility:visible;}\n90%  {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n100% {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n}\n@keyframes flip-back8 {\n0%   {transform:translate(270px,0px) rotateY(  0deg); visibility: hidden;}\n50%  {transform:translate(270px,0px) rotateY(-90deg); visibility: hidden;}\n66%  {transform:translate(270px,0px) rotateY(  0deg); visibility:visible;}\n90%  {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n100% {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n}\n@keyframes flip-back7 {\n0%   {transform:translate(225px,0px) rotateY(  0deg); visibility: hidden;}\n50%  {transform:translate(225px,0px) rotateY(-90deg); visibility: hidden;}\n65%  {transform:translate(225px,0px) rotateY(  0deg); visibility:visible;}\n90%  {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n100% {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n}\n@keyframes flip-back6 {\n0%   {transform:translate(180px,0px) rotateY(  0deg); visibility: hidden;}\n50%  {transform:translate(180px,0px) rotateY(-90deg); visibility: hidden;}\n64%  {transform:translate(180px,0px) rotateY(  0deg); visibility:visible;}\n90%  {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n100% {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n}\n@keyframes flip-back5 {\n0%   {transform:translate(135px,0px) rotateY(  0deg); visibility: hidden;}\n50%  {transform:translate(135px,0px) rotateY(-90deg); visibility: hidden;}\n63%  {transform:translate(135px,0px) rotateY(  0deg); visibility:visible;}\n90%  {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n100% {transform:translate(  0px,0px) rotateY(  0deg); visibility:visible;}\n}\n@keyframes flip-back4 {\n0%   {transform:translate(90px,0px) rotateY(  0deg); visibility: hidden;}\n50%  {transform:translate(90px,0px) rotateY(-90deg); visibility: hidden;}\n62%  {transform:translate(90px,0px) rotateY(  0deg); visibility:visible;}\n90%  {transform:translate( 0px,0px) rotateY(  0deg); visibility:visible;}\n100% {transform:translate( 0px,0px) rotateY(  0deg); visibility:visible;}\n}\n@keyframes flip-back3 {\n0%   {transform:translate(45px,0px) rotateY(  0deg); visibility: hidden;}\n50%  {transform:translate(45px,0px) rotateY(-90deg); visibility: hidden;}\n61%  {transform:translate(45px,0px) rotateY(  0deg); visibility:visible;}\n90%  {transform:translate( 0px,0px) rotateY(  0deg); visibility:visible;}\n100% {transform:translate( 0px,0px) rotateY(  0deg); visibility:visible;}\n}\n@keyframes flip-back2 {\n0%   {transform:translate(0px,0px) rotateY( 0deg); visibility: hidden;}\n50%  {transform:translate(0px,0px) rotateY(-90deg);visibility: hidden;}\n60%  {transform:translate(0px,0px) rotateY( 0deg); visibility:visible;}\n90%  {transform:translate(0px,0px) rotateY( 0deg); visibility:visible;}\n100% {transform:translate(0px,0px) rotateY( 0deg); visibility:visible;}\n}\n\/* END Sequence Two *\/\n\/* Define deck for dealing - Just placing a deck here to deal from *\/\n.deck {\n\tmargin-left:35px;\n\ttop: 20px;\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/back.jpg');\n\tbackground-repeat: no-repeat;\n\twidth: 120px;\n\theight: 180px;\n\tposition: absolute;\n\tborder-radius: 10px;\n\tborder: 3px solid #000000;\n\tborder-right:9px solid #000000;\n\tvisibility:visible;\n\tanimation: deck 15s;\nbox-sizing: content-box;\n}\n\/* hide and show deck for deal *\/\n@keyframes deck {\n0%  {visibility: hidden;}\n100%{visibility: hidden;}\n}\n\/* Done with Deck Placment *\/\n\/* START Sequence Three: Dealing the cards from the Deck above *\/\n\/* Define cards for deal - placement and Appearance of the cards that will be dealt - could have been added above to save lines *\/\n.deal1, .deal2, .deal3, .deal4, .deal5  {\n\tmargin-left:35px;\n\ttop: 20px;\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/back.jpg');\n\tbackground-repeat: no-repeat;\n\twidth: 120px;\n\theight: 180px;\n\tposition: absolute;\n\tborder-radius: 10px;\n\tborder: 3px solid #000000;\n}\n.deal1, .deal2, .deal3, .deal4, .deal5 {visibility: hidden;}\n\/* Define and Assign dealing cards with Animation Keyframes *\/\n.deal1 {animation: deal1 25s;}\n.deal2 {animation: deal2 26s;}\n.deal3 {animation: deal3 27s;}\n.deal4 {animation: deal4 28s;}\n.deal5 {animation: deal5 29s;}\n\/* Dealing cards Animation Keyframes *\/\n@keyframes deal1 {\n0%  {transform:translate( px,  0px) rotateZ(  0deg) rotateX( 0deg); visibility: hidden;}\n55% {transform:translate(0px,  0px) rotateZ(  0deg) rotateX( 0deg); visibility: hidden;}\n57% {transform:translate(0px,210px) rotateZ(180deg) rotateX( 0deg); visibility:visible;}\n97% {transform:translate(0px,210px) rotateZ(180deg) rotateX( 0deg); visibility:visible;}\n100%{transform:translate(0px,210px) rotateZ(180deg) rotateX(90deg); visibility:visible;}\n} \n@keyframes deal2 {\n0%  {transform:translate(0px,0px)     rotateZ(  0deg) rotateX( 0deg); visibility: hidden;}\n58% {transform:translate(0px,0px)     rotateZ(  0deg) rotateX( 0deg); visibility: hidden;}\n60% {transform:translate(150px,210px) rotateZ(360deg) rotateX( 0deg); visibility:visible;}\n97% {transform:translate(150px,210px) rotateZ(360deg) rotateX( 0deg); visibility:visible;}\n100%{transform:translate(150px,210px) rotateZ(360deg) rotateX(90deg); visibility:visible;}\n}\n@keyframes deal3 {\n0%  {transform:translate(0px,0px)     rotateZ(  0deg) rotateX( 0deg); visibility: hidden;}\n61% {transform:translate(0px,0px)     rotateZ(  0deg) rotateX( 0deg); visibility: hidden;}\n63% {transform:translate(300px,210px) rotateZ(360deg) rotateX( 0deg); visibility:visible;}\n97% {transform:translate(300px,210px) rotateZ(360deg) rotateX( 0deg); visibility:visible;}\n100%{transform:translate(300px,210px) rotateZ(360deg) rotateX(90deg); visibility:visible;}\n}\n@keyframes deal4 {\n0%  {transform:translate(0px,0px)     rotateZ(  0deg) rotateX( 0deg); visibility: hidden;}\n64% {transform:translate(0px,0px)     rotateZ(  0deg) rotateX( 0deg); visibility: hidden;}\n66% {transform:translate(450px,210px) rotateZ(540deg) rotateX( 0deg); visibility:visible;}\n97% {transform:translate(450px,210px) rotateZ(540deg) rotateX( 0deg); visibility:visible;}\n100%{transform:translate(450px,210px) rotateZ(540deg) rotateX(90deg); visibility:visible;}\n}\n@keyframes deal5 {\n0%  {transform:translate(0px,0px)     rotateZ(  0deg) rotateX(  0deg); visibility: hidden;}\n67% {transform:translate(0px,0px)     rotateZ(  0deg) rotateX(  0deg); visibility: hidden;}\n70% {transform:translate(600px,210px) rotateZ(720deg) rotateX(  0deg); visibility:visible;}\n97% {transform:translate(600px,210px) rotateZ(720deg) rotateX(  0deg); visibility:visible;}\n100%{transform:translate(600px,210px) rotateZ(720deg) rotateX( 90deg); visibility:visible;}\n}\n\/* END Sequence Three  *\/\n\/* START Sequence Four: Flipping the Dealt cards *\/\n\/* Define Dealth cards with Images and Assign Keyframes (Location and Appearance on line 429 to save repeatative coding *\/\n.dealt1, .dealt2, .dealt3, .dealt4, .dealt5 {\n\ttop: 230px;\n\twidth: 120px;\n\theight: 180px;\n\tposition: absolute;\n\tborder-radius: 10px;\n\tborder: 2px solid #000000;\n\tvisibility:visible;\n}\n.dealt1 {\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/10-hearts.jpg');\n\tmargin-left: 30px;\n\tanimation: dealt1 40s;\n}\n.dealt2 {\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/j-hearts.jpg');\n\tmargin-left:180px;\n\tanimation: dealt2 40s;\n}\n.dealt3 {\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/q-hearts.jpg');\n\tmargin-left: 330px;\n\tanimation: dealt3 40s;\n}\n.dealt4 {\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/k-hearts.jpg');\n\tmargin-left: 480px;\n\tanimation: dealt4 40s;\n}\n.dealt5 {\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/poker\/cards\/a-hearts.jpg');\n\tmargin-left: 630px;\n\tanimation: dealt5 40s;\n}\n\/* Keyframes for Sequence Four: Flipping or turning over the Dealt cards *\/\n@keyframes dealt1 {\n0%  {transform:rotateX(-90deg); visibility:hidden;}\n62% {transform:rotateX(-90deg); visibility:hidden;}\n64% {transform:rotateX(  0deg); visibility:visible;}\n100%{transform:rotateX(  0deg); visibility:visible;}\n}\n@keyframes dealt2 {\n0%  {transform:rotateX(-90deg); visibility:hidden;}\n65% {transform:rotateX(-90deg); visibility:hidden;}\n67% {transform:rotateX(  0deg); visibility:visible;}\n100%{transform:rotateX(  0deg); visibility:visible;}\n}\n@keyframes dealt3 {\n0%  {transform:rotateX(-90deg); visibility:hidden;}\n67% {transform:rotateX(-90deg); visibility:hidden;}\n69% {transform:rotateX(  0deg); visibility:visible;}\n100%{transform:rotateX(  0deg); visibility:visible;}\n}\n@keyframes dealt4 {\n0%  {transform:rotateX(-90deg); visibility:hidden;}\n70% {transform:rotateX(-90deg); visibility:hidden;}\n72% {transform:rotateX(  0deg); visibility:visible;}\n100%{transform:rotateX(  0deg); visibility:visible;}\n}\n@keyframes dealt5 {\n0%  {transform:rotateX(-90deg); visibility:hidden;}\n72% {transform:rotateX(-90deg); visibility:hidden;}\n74% {transform:rotateX(  0deg); visibility:visible;}\n100%{transform:rotateX(  0deg); visibility:visible;}\n}\n\/* END Sequence Four *\/\n@media screen and (max-width: 765px) {\n    #slot-view  {\n        transform: scale(0.7);\n        transform-origin: center top;\nleft: -10%\n    }\n}\n@media screen and (max-width: 600px) {\n     #slot-view   {\n        transform: scale(0.5);\n        transform-origin: center top;\nleft: -20%;\n    }\n}\n@media screen and (max-width: 480px) {\n     #slot-view  {\n        transform: scale(0.3);\n        transform-origin: center top;\nleft: -30%;\n    }\n}\n.ad-center {text-align: center; width: 80%; margin: 0 auto; border: position: relative; height: 130px;} \n<\/style>\n<div id=\"vp\">\n<p> Looking for FREE Non-Gambling Vegas Style Poker &amp; Keno Games?<br \/> Try <a target=\"_blank\"  href=\"https:\/\/www.videopoker.com\/?u=8064\" onclick=\u201dtrackOutboundLink(\u2018https:\/\/www.videopoker.com\/?u=8064\u2019); return false;\">Video Poker.com<\/a><\/p>\n<\/p><\/div>\n<div class=\"ani-box\">\n<div id=\"slot-wrapper\">\n<div id=\"slot-view\">\n<p>\t\t\t<!--Sequence One: Spread the Cards--><\/p>\n<div id=\"hearts2\"><\/div>\n<div id=\"hearts3\"><\/div>\n<div id=\"hearts4\"><\/div>\n<div id=\"hearts5\"><\/div>\n<div id=\"hearts6\"><\/div>\n<div id=\"hearts7\"><\/div>\n<div id=\"hearts8\"><\/div>\n<div id=\"hearts9\"><\/div>\n<div id=\"heartsx\"><\/div>\n<div id=\"heartsj\"><\/div>\n<div id=\"heartsq\"><\/div>\n<div id=\"heartsk\"><\/div>\n<div id=\"heartsa\"><\/div>\n<p>\t\t\t<!--Sequence Two: Flip the Deck--><\/p>\n<div class=\"backa\"><\/div>\n<div class=\"backk\"><\/div>\n<div class=\"backq\"><\/div>\n<div class=\"backj\"><\/div>\n<div class=\"backx\"><\/div>\n<div class=\"back9\"><\/div>\n<div class=\"back8\"><\/div>\n<div class=\"back7\"><\/div>\n<div class=\"back6\"><\/div>\n<div class=\"back5\"><\/div>\n<div class=\"back4\"><\/div>\n<div class=\"back3\"><\/div>\n<div class=\"back2\"><\/div>\n<p>\t\t\t<!--Create the Dealing Deck--><\/p>\n<div class=\"deck\"><\/div>\n<p>\t\t\t<!--Sequence Three: Dealing the Cards--><\/p>\n<div class=\"deal1\"><\/div>\n<div class=\"deal2\"><\/div>\n<div class=\"deal3\"><\/div>\n<div class=\"deal4\"><\/div>\n<div class=\"deal5\"><\/div>\n<p>\t\t\t<!--Sequence Four: Flipping the cards--><\/p>\n<div class=\"dealt1\"><\/div>\n<div class=\"dealt2\"><\/div>\n<div class=\"dealt3\"><\/div>\n<div class=\"dealt4\"><\/div>\n<div class=\"dealt5\"><\/div>\n<\/p><\/div>\n<p><!--Close slot-view -->\n\t<\/div>\n<div style=\"width:100%; text-align: center;\"><button class=\"play\" id=\"reload\">Play Again<\/button><\/div>\n<\/div>\n<p> <!-- Ani-box  --><\/p>\n<div class=\"below-ani\"> CSS3 Animation Demo of Poker Playing Cards in Action <\/div>\n<div class=\"ad-center\">\n<div id=\"amzn-assoc-ad-9f5323ed-ca98-4137-81fd-07a15bbb80c8\"><\/div>\n<p><script async src=\"\/\/z-na.amazon-adsystem.com\/widgets\/onejs?MarketPlace=US&#038;adInstanceId=9f5323ed-ca98-4137-81fd-07a15bbb80c8\"><\/script><\/div>\n<p>\t<script src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/slot-machine.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Looking for FREE Non-Gambling Vegas Style Poker &amp; Keno Games? Try<\/p>\n","protected":false},"author":2,"featured_media":2597,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,176,4,5,175],"class_list":["post-1640","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-cards","tag-css","tag-css-animation","tag-poker"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=1640"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1640\/revisions"}],"predecessor-version":[{"id":2919,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1640\/revisions\/2919"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2597"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=1640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=1640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=1640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}