我有一个CSS地图标记,其中包含一些CSS3动画,下面是它的代码:
https://jsfiddle.net/xg7xfzeq/
body {
background: #e6e6e6;
}
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.pin:after {
content: "";
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: #e6e6e6;
position: absolute;
border-radius: 50%;
}
.bounce {
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
top: 50%;
margin: 11px 0px 0px -12px;
transform: rotateX(55deg);
z-index: -2;
}
.pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #00cae9;
animation-delay: 1.1s;
}
@keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0;
}
}
@keyframes bounce {
0% {
opacity: 0;
transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
transform: translateY(30px) rotate(-45deg);
}
80% {
transform: translateY(-10px) rotate(-45deg);
}
100% {
transform: translateY(0) rotate(-45deg);
}
}
.myBounceDiv {
-moz-animation:bounce .40s linear;
-webkit-animation:bounce .40s linear;
}
@-moz-keyframes bounce {
0%{ -moz-transform:scale(0); opacity:0;}
50%{ -moz-transform:scale(1.3); opacity:0.4; }
75%{ -moz-transform:scale(0.9); opacity:0.7;}
100%{ -moz-transform:scale(1); opacity:1;}
}
@-webkit-keyframes bounce {
0%{ -webkit-transform:scale(0); opacity:0;}
50%{ -webkit-transform:scale(1.3); opacity:0.4;}
75%{ -webkit-transform:scale(0.9); opacity:0.7;}
100%{ -webkit-transform:scale(1); opacity:1;}
}
以及它的HTML
<div class='myBounceDiv'>
<div class='pin bounce'></div>
<div class='pulse'></div>
</div>
我想在点击时添加弹跳的CSS3动画,我找到了一些解决方案,例如使用JavaScript在单击其div时更改CSS样式。虽然这是可能的,但当我更改它的CSS类时,它将永久地开始弹跳。如何使它只播放一次动画?一种方法是触发计时器,在1000毫秒后将其CSS类更改为第一个类,但还有另一个问题,我的div的类有另一个动画(当它首次出现在页面上时,从顶部向下掉落),因此如果我将其CSS类更改为弹跳动画,然后再次更改回原始状态,外观动画会再次触发,这不是我需要的。 是否有任何使用纯JavaScript和CSS实现我所需的方式?实际上,我需要做类似于这样的东西http://dynamicsjs.com/examples/pin.html,但它的动画是在单击时使用CSS显示的。