动画--点击按钮缩放消失跳转页面?

js:
function hov(obj,url){
obj.on("click",function (){
$(this).find("a").addClass("hov");
setTimeout(function (){
window.location.href=url;
obj.find("a").removeClass("hov")
},500)
})
}

//点击诗词欣赏按钮
hov($(".btn"),"list.html");
//点击诗词分类
//爱情
hov($(".aq"),"love.html");
//抒情
hov($(".sq"),"shuqing.html");
//哲理
hov($(".zl"),"poem.html");
//闺怨
hov($(".gy"),"guiyuan.html");
//婉约
hov($(".wy"),"wanyue.html");
//思念
hov($(".sn"),"sinian.html");
//羁旅
hov($(".jl"),"jilv.html");
css动画设置:
.btn .hov{
-webkit-animation: gelatine 0.5s 1;
animation:gelatine 0.5s 1;
}
@keyframes gelatine{
from,to{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
 
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
 
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
 
 
 
 
 
 
 
 
 
 
 
 
 
原文地址:https://www.cnblogs.com/duanzhange/p/9008711.html