html,
body {
    height: 100%;
}

.poker {
    bottom: 0;
    height: 100vh;
    left: 50%;
    margin-left: -50vh;
    position: absolute;
    transform: scale(0.9);
    transform-origin: 50% 100%;
    width: 100vh;
}

.hand {
    bottom: -1vh;
    left: 0;
    position: absolute;
}

.finger,
.card {
    -webkit-animation: creep 3s ease-in-out 0s infinite alternate backwards;
            animation: creep 3s ease-in-out 0s infinite alternate backwards;
    background: no-repeat url('../image/poker.png') 0 0;
    background-size: 200vh 200vh;
    position: absolute;
    transform-origin: 50% 90%;
}

.pinky {
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
    bottom: 0;
    height: 36vh;
    left: 42.8vh;
    transform-origin: 50% 100%;
    width: 36.6vh;
}

.ring {
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
    background-position: -37vh 0;
    bottom: 0.8vh;
    height: 47vh;
    left: 35.7vh;
    width: 47.4vh;
}

.middle {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
    background-position: -85vh 0;
    bottom: 5.6vh;
    height: 62.5vh;
    left: 31.7vh;
    width: 47.2vh;
}

.index {
    background-position: -133vh 0;
    bottom: 16.6vh;
    height: 53.6vh;
    left: 25.6vh;
    width: 33.5vh;
}

.cards {
    -webkit-animation: creep 3s ease-in-out 0s infinite alternate;
            animation: creep 3s ease-in-out 0s infinite alternate;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: 40% 65%;
    width: 100%;
}

.ten {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
    background-position: -0.1vh -65vh;
    bottom: 29.8vh;
    height: 61.2vh;
    left: 37.8vh;
    transform-origin: 5% 70%;
    width: 60.6vh;
}

.jack {
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
    background-position: -62vh -65vh;
    bottom: 44vh;
    height: 52.4vh;
    left: 34.2vh;
    transform-origin: 15% 90%;
    width: 47.8vh;
}

.queen {
    -webkit-animation-delay: 1.1s;
            animation-delay: 1.1s;
    background-position: -111vh -65vh;
    bottom: 39.2vh;
    height: 52.7vh;
    left: 26.9vh;
    transform-origin: 50% 95%;
    width: 25vh;
}

.king {
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
    background-position: -137vh -65vh;
    bottom: 38vh;
    height: 58.1vh;
    left: 13.6vh;
    transform-origin: 60% 95%;
    width: 36.3vh;
}

.ace {
    -webkit-animation-delay: 1.3s;
            animation-delay: 1.3s;
    background-position: 0vh -127vh;
    bottom: 27.9vh;
    height: 55.8vh;
    left: 3.6vh;
    transform-origin: 90% 100%;
    width: 39.6vh;
}

@-webkit-keyframes creep {
    0% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

@keyframes creep {
    0% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}