animation动画重复播放思路

步骤1

给css中所需元素设置点击时的类，并规定点击时出现的样式和animation，注:两个@keyframe样式相反（ps: 原来试过使用同一个keyframe但不起作用，有什么更好的建议欢迎issue）

.player-box iframe{
    visibility: hidden; /*为了不让iframe中内容溢出，要设置成visibility: hidden, 之后在js文件动态改变这个属性*/
    transform-origin: 100% 0%;
    transform: scale(0, 0);
    overflow: hidden;
}
.btn-active iframe{
    visibility: visible;
    animation: active .4s ease-in-out;
    transform: scale(1, 1);   
}
.btn-hide iframe{
    visibility: visible;
    animation: cancle .4s ease-in-out; 
}

步骤2

在jq或者js中动态获取dom，小程序或vue使用wx-if或v-if来动态控制要添加、删除的类，通过事件机制监听添加删除类的时机即可