/* 动效 */
.anim {
animation-duration: .8s;
animation-fill-mode: both;
}
.anim.bounceIn {
animation-duration: 0.5s;
}
.bounceIn {
animation-name: bounceIn;
}
@keyframes bounceIn {
from, 50%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate(-50%,-50%) scale3d(0,0,0);
transform: translate(-50%,-50%) scale3d(0,0,0)
}
50% {
-webkit-transform: translate(-50%,-50%) scale3d(1.1,1.1,1.1);
transform: translate(-50%,-50%) scale3d(1.1,1.1,1.1)
}
100% {
opacity: 1;
-webkit-transform: translate(-50%,-50%) scale3d(1,1,1);
transform: translate(-50%,-50%) scale3d(1,1,1)
}
}
CSS3 弹窗动效交互
于 2019-03-20 10:14:11 首次发布