CSS-Animation funktioniert nicht

Ich versuche nur ein Tutorial in Webdesignmag zu implementieren, aber es scheint nicht zu funktionieren. Es soll "eine unterhaltsame Ladeanimation für eine bessere UX" sein. Ich habe es in Chrome 49.0.2623.87 m und Firefox 46.0.1 versucht. Sieht jemand den Fehler bitte?CSS-Animation funktioniert nicht

html:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="testcss2.css"></link> 
</head> 
<body> 
<section id="loading"> 
<div><span></span></div> 
</section> 
</body> 
</html>

css:

html, body,#loading { 
    display: block; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

#loading > * { 
    position: relative; 
    display: block; 
    top: 25%; 
    width: 50%; 
    height: 50%; 
    margin: 0 auto 0 auto; 
    border: 5px solid red; 
} 

#loading > * { 
    -webkit-animation-name: loadAnim; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -animation-name: loadAnim; 
    -animation-duration: 2s; 
    -animation-iteration-count: infinite; 
} 

#loading > * > * { 
    display: block; 
    top: 25%; 
    width: 50%; 
    height: 50%; 
    margin: 0 auto 0 auto; 
    border: 5px solid gray; 
} 

#loading > * > * { 
    -webkit-animation-name: loadAnim; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: infinite; 
    -animation-name: loadAnim; 
    -animation-duration: 4s; 
    -animation-iteration-count: infinite; 
} 

#loading > * > @-webkit-keyframes loadAnim { 
    from { 
     -webkit-transform: rotate(0deg); 
    } 
    to{ 
     -webkit-transform: rotate(360deg); 
    } 
    @keyframes loadAnim { 
     from { transform: rotate(0deg);} 
     to { transform: rotate(360deg);} 
    } 
}

Quelle

2016-05-17 LauraNMS

Zuerst werden die Standardeigenschaften haben nicht eine '-' vor ihnen. Zweitens ist die Verschachtelungsstruktur der Keyframe-Regeln falsch. Drittens sollten Sie keine Selektoren wie '#loading> *>' vor '@ -webkit-keyframes' hinzufügen, da dies keine Bedeutung hat. Die Reparatur all dieser Codes sollte funktionieren. – Harry

Sie brauchen nicht die #loading > * > bevor Sie Animation Code. Ändern es dazu funktioniert der Trick:

@-webkit-keyframes loadAnim { 
    from { 
     -webkit-transform: rotate(0deg); 
    } 
    to{ 
     -webkit-transform: rotate(360deg); 
    } 
} 

@keyframes loadAnim { 
    from { transform: rotate(0deg);} 
    to { transform: rotate(360deg);} 
}

Sehen Sie diese Geige als Referenz: https://jsfiddle.net/y8q3wdv9/

Quelle

2016-05-17 16:20:50 Keiwan

* danke *! Ich weiß nicht, warum sie das in der Zeitschrift gelassen haben. – LauraNMS

@keyframes loadAnim {} sollte nicht innerhalb @-webkit-keyframes loadAnim {}
Die animation Eigenschaften sollten nicht - vor haben eingebettet werden von ihnen.

https://jsfiddle.net/Lh2dyft9/

Quelle

2016-05-17 16:36:36 johnniebenson

Antwort

Verwandte Themen