/* 獎項掉落 */
.start {
    -webkit-animation: ballfalling 1s linear forwards;
    animation: ballfalling 1s linear forwards;
}
/* 球滾到中間 */
.rolling{
    -webkit-animation: ballmoving 1.5s forwards cubic-bezier(.17,.67,.53,1.26);
    animation: ballmoving 1.5s forwards cubic-bezier(.17,.67,.53,1.26);
    
}
/* 扭蛋上蓋 */
.closetop{
    /* display: block; */
    -webkit-animation: balltop 0.4s linear forwards;
    animation: balltop 0.4s linear forwards;
}
/* 扭蛋下蓋 */
.closebottom{
    -webkit-animation: ballbottom 0.4s linear forwards;
    animation: ballbottom 0.4s linear forwards;
}
/* 獎項內容 */
.open{
    -webkit-animation: ballaward .4s .1s linear forwards;
    animation: ballaward .4s .1s linear forwards;
}
/* 關鍵影格(@keyframe) */
@keyframes ballfalling {
    0% {
        top: 27%;
        left: 12%;
        opacity: 0;
    }
    20% {  
        top: 27%;
        left: 4%;
        opacity: 1;   
    }
    60% {
        top: 62%;
        left: 4%; 
    }
    80% {
        top: 62%;
        left: 22.5%;
        transform: scale(1);
    }
    100%{
        top: 80.2%;
        left: 22.5%;
        transform: scale(2);
    }
}

@media screen and (max-width: 640px) {
    @keyframes ballfalling {
        0% {
            top: 27%;
            left: 12%;
            opacity: 0;
        }
        20% {  
            top: 27%;
            left: 0%;
            opacity: 1;   
        }
        60% {
            top: 52%;
            left: 0%; 
        }
        80% {
            top: 52%;
            left: 19%;
            transform: scale(1);
        }
        100%{
            top: 79.2%;
            left: 19%;
            transform: scale(3);
        }
    }  
}
@keyframes ballmoving{
    0%{
        bottom: 0%;
        left: 30%;
        /* right: -50%; */
        margin-left: -85px;
        margin-bottom: -85px;
        transform: rotateZ(-10deg);
    }
    60%{
        transform: rotateZ(-10deg);
    }
    80%{
        left: 50%;
        bottom: 50%;
        margin-left: -85px;
        margin-bottom: -85px;
        transform: scale(1);
        transform: rotateZ(20deg);
    }
    100%{
        left: 50%;
        bottom: 50%;
        margin-left: -85px;
        margin-bottom: -85px;
        transform: scale(1);
        transform: rotateZ(0deg);
    }
}
@keyframes balltop{
    0%{
        top: 48%;
        /* height: 92px; */
        visibility: visible;
        transform: scale(1);
    }
    90%{
        top: 30%;
        /* height: 0; */
        transform: scale(1);
        transition: ease-in-out;
    }
    100%{
        top: 30%;
        /* height: 0; */
        transform: scale(0);
        transition: ease-in-out;
    }
}
@keyframes ballbottom{
    0%{
        top: 52%;
        /* height: 100px; */
        transform: scale(1);
        visibility: visible;
    }
    99%{
        top: 70%;
        transform: scale(1);
        transition: ease-in-out;
    }
    100%{
        top: 70%;
        transform: scale(0);
        transition: ease-in-out;
    }
}
@keyframes ballaward{
    0%{
        top: 0;
        opacity: 1;
        transform: scale(0);
    }
    90%{
        top: -50;
        opacity: 1;
        transform: scale(1);
    }
    100%{
        top: -50;
        opacity: 1;
        transform: scale(1);
    }
}