Wie animiere ich ein Element zum Schwingen in CSS3?

Seit ich the Treahouse website gesehen habe und der Zeicheneffekt in den Baum geschwungen habe, habe ich versucht, es zu reproduzieren.Wie animiere ich ein Element zum Schwingen in CSS3?

.box{ 
    width:50px; height:50px; 
    background: blue; 
    box-shadow: 0 0 5px blue; 
    margin:100px; 
    float: left; 
    -moz-animation: 3s ease 0s normal none infinite swing; 
    -moz-transform-origin: center top; 
}

Aber es wird nicht schwingen.

Hier ist a demo on JS Fiddle.

Ich versuchte auch eine Modifikation davon.

bod{ 
    background:blue; 
} 
.box{ 
    width:50px; height:50px; 
    background: yellow; 
    box-shadow: 0 0 10px red,0 0 25px red inset; 
    margin:100px; 
    float: left; 
    -moz-animation: 3s ease 0s normal none infinite swing; 
    -moz-transform-origin: center top; 
    border-radius:50%; 
} 
@-webkit-keyframes swing { 
from { 
    left: -2px; 
} 
to { 
    left: 200px; 
} 
}

Aber das funktioniert auch nicht. Siehe das demo on JS Fiddle.

Quelle

2012-03-28 Toni Michel Caubet

Ich bin mir ziemlich sicher, dass hier einige JavaScript oder jQuery beteiligt sind. – j08691

nein, es ist kein Javascript beteiligt. Aber wo ist dein Keyframe? –

versuchte dies aber nicht funktioniert ... http://jsfiddle.net/gVCWE/11/ –

Sie könnten versuchen, mit transform: rotate() und wie in Svens Kommentar ändern Sie das Präfix zu "-moz-" nicht "-webkit-", weil Sie Mozilla-Animationen verwenden. Hier

ein Beispiel: http://jsfiddle.net/gVCWE/14/

.box{ 
    width:50px; height:50px; 
    background: yellow; 
    border: 1px solid black; 
    margin:100px; 
    position: relative; 
    float: left; 
    -moz-animation: 3s ease 0s normal none infinite swing; 
    -moz-transform-origin: center top; 
    -webkit-animation:swing 3s infinite ease-in-out; 
    -webkit-transform-origin:top; 
} 

@-moz-keyframes swing{ 
    0%{-moz-transform:rotate(-3deg)} 
    50%{-moz-transform:rotate(3deg)} 
    100%{-moz-transform:rotate(-3deg)} 
} 
@-webkit-keyframes swing{ 
    0%{-webkit-transform:rotate(-3deg)} 
    50%{-webkit-transform:rotate(3deg)} 
    100%{-webkit-transform:rotate(-3deg)} 
}

Auch der Grund, warum sie -moz-transform-origin: center top; haben, ist so dreht sie sich um die Spitze so mit links: -2px nach links: 200px nicht sinnvoll.

EDIT: neues jsfiddle Beispiel: http://jsfiddle.net/gVCWE/20/

Quelle

2012-03-28 16:05:43

ist also nicht Cross css3 Browser? –

Es ist, haben Sie wahrscheinlich Firebug oder die im Browser Inspector verwendet, um ihre CSS anzuzeigen? Weil du Firefox benutzt hast, hättest du nur die CSS gesehen, die für Mozilla gilt, also hast du nur -moz-animation und -moz-transform-origin. Ich werde meine Antwort mit einem Beispiel für zusätzliche Funktionen für Webkit-Browser aktualisieren. Beachten Sie, dass wenn Sie die Teamtreehouse-Website in Google Chrome anzeigen, sie nicht schwingen. Dies liegt möglicherweise daran, dass die Animation in einem bestimmten Browser abgehackt ist und der Designer entschieden hat, dass es am besten ist, die Keyframes nicht auf Webkit-Browser anzuwenden, oder sie haben es einfach vergessen. –

Ich sehe, wie es jetzt funktioniert; Vielen Dank! –

Wenn ich das obige Verfahren verwendet, Es funktionierte in allen Browsern außer IE in Ordnung. Durch Verwendung des nachstehenden Codes funktioniert der 'Swing' in IE10 & IE11. So traurig, dass IE9 es nicht machen konnte; P

.box{ 
    width:50px; height:50px; 
    background: yellow; 
    border: 1px solid black; 
    margin:100px; 
    position: relative; 
    float: left; 
    -moz-animation: 3s ease 0s normal none infinite swing; 
    -moz-transform-origin: center top; 
    -webkit-animation:swing 3s infinite ease-in-out; 
    -webkit-transform-origin:top; 
    -ms-animation:swing 3s infinite ease-in-out; 
    -ms-transform-origin:top; 
} 

@-moz-keyframes swing{ 
    0%{-moz-transform:rotate(-3deg)} 
    50%{-moz-transform:rotate(3deg)} 
    100%{-moz-transform:rotate(-3deg)} 
} 
@-webkit-keyframes swing{ 
    0%{-webkit-transform:rotate(-3deg)} 
    50%{-webkit-transform:rotate(3deg)} 
    100%{-webkit-transform:rotate(-3deg)} 
} 
@-ms-keyframes swing{ 
    0%{-ms-transform:rotate(-3deg)} 
    50%{-ms-transform:rotate(3deg)} 
    100%{-ms-transform:rotate(-3deg)} 
}

Quelle

2014-12-04 11:05:25 Rohith

Wie animiere ich ein Element zum Schwingen in CSS3?

Antwort

Verwandte Themen