我正在使用animate.css中的代码来使用关键帧动画。他们不工作,我不知道为什么。我知道代码正在执行,并且正在添加类。我不明白为什么css不适用。
#popup {
position: fixed;
left: 50%;
top: 50%;
height: 50%;
width: 50%;
background-color: #bcbcbc;
display: none;
z-index: 9;
transform: translateX(-50%) translateY(-50%);
border-radius: 10px;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0 !important;
display: block;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1 !important;
}
}
@keyframes zoomIn {
from {
opacity: 0 !important;
display: block;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1 !important;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomOut {
from {
opacity: 1 !important;
}
50% {
opacity: 0 !important;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
display: none;
opacity: 0 !important;
}
}
@keyframes zoomOut {
from {
opacity: 1 !important;
}
50% {
opacity: 0 !important;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
display: none;
opacity: 0 !important;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
var popup =document.getElementById('popup');
if (z == 0) {
z = 1;
zoom.to({
x: parseFloat(stateCoords[selectedState][0]),
y: parseFloat(stateCoords[selectedState][1]),
scale: 4
})
setTimeout(function(){
popup.className = 'zoomIn';
}, 1000);
} else {
popup.className = 'zoomOut';
zoom.out();
z = 0;
}