/* 按钮出现 */
@keyframes btnAppear {
    from{
        opacity: 0;
    }
    to { 
        opacity: 1;
    }
}
@-webkit-keyframes btnAppear {
    from{
        opacity: 0;
    }
    to { 
        opacity: 1;
    }
}
/* 首页按钮 */
.startFlash { 
    -webkit-animation: btnAppear 1s linear 1 forwards; 
            animation: btnAppear 1s linear 1 forwards;
}
/* 问题按钮 */
.btnLeftAppear { 
    -webkit-animation: btnAppear 0.5s linear  1 forwards; 
            animation: btnAppear 0.5s linear  1 forwards;
}

.btnRightAppear { 
    -webkit-animation: btnAppear .5s linear .25s 1 forwards; 
            animation: btnAppear .5s linear .25s 1 forwards;
}
/* Q5音乐手指按钮 */
.handFlashL { 
    -webkit-animation: btnAppear .6s ease-in infinite alternate; 
            animation: btnAppear .6s ease-in infinite alternate;
}
.handFlashR { 
    -webkit-animation: btnAppear .6s ease-in .6s infinite alternate; 
            animation: btnAppear .6s ease-in .6s infinite alternate;
}
/* 光影缩放 */
@keyframes lightFlash {
    from{
        transform:scale(1);
    }
    to { 
        transform:scale(1.14);
    }
}
@-webkit-keyframes lightFlash {
    from{
        transform:scale(1);
    }
    to { 
        transform:scale(1.14);
    }
}
/* 首页按钮光影 */
.startBtnFlash { 
    -webkit-animation: lightFlash 1s linear infinite alternate; 
            animation: lightFlash 1s linear infinite alternate;
}
/* 第一页按钮光影 */
.QAShine { 
    -webkit-animation: lightFlash 1.5s linear infinite alternate; 
            animation: lightFlash 1.5s linear infinite alternate;
}
.QAShine2 { 
    -webkit-animation: lightFlash 1.5s linear 1.5s infinite alternate; 
            animation: lightFlash 1.5s linear 1.5s infinite alternate;
}

/* 第一道题左边卷轴掉落 */
@keyframes Q1LeftFlash {
    0%{
        opacity: 0;
        top: 0rem;
        /* transform:translate(0,0); */
    }
    25% { 
        opacity: 1;
        top: 3.1rem;
        /* transform:translate(0,3rem); */
    }
    65% { 
        opacity: 1;
        top: 2.8rem;
        /* transform:translate(0,2.7rem); */
    }
    100% { 
        opacity: 1;
        top: 3rem;
        /* transform:translate(0,2.8rem); */
    }
}
@-webkit-keyframes Q1LeftFlash {
    0%{
        opacity: 0;
        top: 0rem;
        /* transform:translate(0,0); */
    }
    25% { 
        opacity: 1;
        top: 3.1rem;
        /* transform:translate(0,3rem); */
    }
    65% { 
        opacity: 1;
        top: 2.8rem;
        /* transform:translate(0,2.7rem); */
    }
    100% { 
        opacity: 1;
        top: 3rem;
        /* transform:translate(0,2.8rem); */
    }
}
.Q1LeftFlash { 
    -webkit-animation: Q1LeftFlash 2s ease 1 forwards;
            animation: Q1LeftFlash 2s ease 1 forwards;
}
.Q1RightFlash { 
    -webkit-animation: Q1LeftFlash 2s ease .5s 1 forwards;
            animation: Q1LeftFlash 2s ease .5s 1 forwards;
}

/* 第一道题卷轴浮动 */
@keyframes Q1ScrollFloat {
    0%{
        opacity: 1;
        transform:translate(0, 0);
    }
    50% { 
        opacity: 1;
        transform:translate(0, -0.2rem);
    }
    100% { 
        opacity: 1;
        transform:translate(0, 0);
    }
}
@-webkit-keyframes Q1ScrollFloat {
    0%{
        opacity: 1;
        transform:translate(0, 0);
    }
    50% { 
        opacity: 1;
        transform:translate(0, -0.2rem);
    }
    100% { 
        opacity: 1;
        transform:translate(0, 0);
    }
}
.Q1ScrollFloat { 
    -webkit-animation: Q1ScrollFloat 1.5s linear infinite;
            animation: Q1ScrollFloat 1.5s linear infinite;
}


@keyframes pointFlash {
    from{
        opacity: 0.6;
        transform:scale(1);
    }
    to { 
        opacity: 1;
        transform:scale(1.1);
    }
}
@-webkit-keyframes pointFlash {
    from{
        opacity: 0.6;
        transform:scale(1);
    }
    to { 
        opacity: 1;
        transform:scale(1.1);
    }
}
.pointFlash { 
    -webkit-animation: pointFlash 1s ease-in-out infinite; 
            animation: pointFlash 1s ease-in-out infinite;
}



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