Ich habe eine CSS-Animation, die eine Drehung mit Keyframes mit transformieren verwendet drehen.CSS spinning Kreisanimation onClick wird abgehackt, wenn mehrmals ausgeführt
Es funktioniert gut beim ersten Mal - aber wenn Sie die Animation mehrmals mit einem Onclick, der die Spin-Klasse hinzufügt, wird es mit der Zeit abgehackt und abgehackt. Hier ist ein Code mit einem Link, um es in jsfiddle:
<div class="row numRandoms">
<h3>Winning Numbers:</h3>
<div class="ball pickedIndex0" ></div>
<div class="ball pickedIndex1" ></div>
<div class="ball pickedIndex2" ></div>
<div class="ball pickedIndex3" ></div>
</div>
.ball {
float: left;
display: block;
width: 150px;
height: 150px;
margin: 20px;
font-size: 4em;
color: black;
padding-top: 3.5%;
text-align: center;
vertical-align: middle;
background-color: white;
border-radius: 50%;
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
}
.spin {
-webkit-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
@-moz-keyframes spin {
from {
-moz-transform:rotate(0deg);
}
to {
-moz-transform:rotate(360deg);
}}
@-o-keyframes spin {
from {
-o-transform:rotate(0deg);
}
to {
-o-transform:rotate(360deg);
}}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}}
Sie können hier den einfachen Code finden: http://lottery-game.marycamacho.com
Ich kann‘: https://jsfiddle.net/vrhc4vet/
Sie können es hier live sehen Arbeits t sagen Sie, wenn andere Aspekte von meinem Javascript die Verschlechterung verursachen oder wenn es etwas inhärentes in der Animation gibt, die es wiederholt, funktioniert es nicht gut.
Ich teste mit dem neuesten Chrom-Browser.
Ihr Code sieht gut aus. Entschuldigung, ich kann "Hack" nicht in Firefox unter Windows 10 in Ihrer Datei reproduzieren. Ich habe versucht, die Spin-Klasse über 'classList.add (" spin ")' und 'className + =" spin "'; beide animierten reibungslos. – Jeremy
@ Jeremy - die Funkstille war nicht sichtbar in der Datei, die mich darauf hinwies, dass es kein CSS-Problem war, sondern ein Problem mit meinem JavaScript-Code. Ich habe den Code umstrukturiert und ein Synchronisierungsproblem mit zwei separaten Timeouts gefunden. Als ich ihn neu strukturierte, so dass es nur noch 1 war, wurde es geglättet. –