Können Sie ändern CSS3-animation keyframe-Parametern-inline (also im HTML-style-Attribut)?

Ist es möglich, ändern Sie die animation keyframe-Attribute durch inline-Anpassungen.

Nehmen Sie zum Beispiel

@-moz-keyframes slidein {
    from {
        width: 10%;
    }

    to {
        width:50%;
    }
}

Wäre es möglich, ändern Sie das width-Attribut in der 'auf' - Teil des keyframe, etwas zu tun, wie

<div id="someID" style="change keyframe here">

Zur Zeit bin ich einfach durch das gesamte Stylesheet dynamisch auf der Seite, um zur Anpassung der keyframes.

Diese Methode funktioniert, aber ich würde viel eher passen Sie die Attribute, inline für Einfachheit.

InformationsquelleAutor Koop | 2011-06-28

  1. 10

    Nicht. da die animation nicht erklärt in das element, es ist nur genannt auf. Es ist wie der Versuch, hinzufügen von Methoden in einem Objekt und nicht zu einer Klasse. Nicht möglich, sorry 😉

    Ah, das macht Sinn. Ich bleibe bei meiner aktuellen Methode dann.
    Ein Fehler: da wir in der Web-Umgebung, die es macht perfekt Sinn, fügen Sie eine Methode in ein Javascript-Objekt...

    InformationsquelleAutor Madara Uchiha

  2. 9

    Hey also lässt denke ein wenig anders... Sie sind möglicherweise nicht in der Lage, dies zu tun...

    <div id="someID" style="change keyframe here">

    aber denke, es zu tun mögen dieses...

    <script>
var createdStyleTag = document.createElement("style");
createdStyleTag.textContent = "@-*whatevaVendor*-keyframes someAnimationName{"+
    "from { width: **SOMETHING YOU DECLARE THROUGH JS**; }"+
    "to{ width: 10%; }"+
"}";

document.body.appendChild(createdStyleTag);
</script>

    Dies ist ziemlich offen, was du willst... du immer die Klassen, die Sie setzen auf Elemente, aber manchmal wollen wir gar nicht ständig die gleichen "von" und "bis" so kann dies ein Weg sein, dies zu tun... im Grunde ist Sie dynamisch erstellen Sie ein style-element einen beliebigen string, der am Ende wird die benötigte Formatvorlage text und fügen Sie es auf den Körper... funktioniert ziemlich gut... es in meinem eigenen framework... Ich Tue es nicht, genau wie diese, aber ich schrieb es so für Sichtbarkeit... Grund, warum dies funktioniert, in einem guten Weg führen wird, eine Menge von meinem DOM wird dynamisch erstellt, so kann es mehr Sinn machen, in dieser Umsetzung...

    Nichts ist unmöglich... denken Sie nur außerhalb der div

    Ah, ich habe gerade realisiert das zu finden, Mozila arnt Unterstützung ; bugzilla.mozilla.org/show_bug.cgi?id=830056 Dummerweise sind Sie nicht scheinen zu denken, es ist ein problem entweder. @benny eine chance, die Sie könnte in die details gehen mit Ihrer Antwort? Es flog ganz über meinem Kopf und ich brauche eine alternative, danke.

    InformationsquelleAutor Delmarc Eric Rosario

  3. 2

    War ich auf der Suche nach einer Lösung für inline-keyframe zu. Zumindest für die "zu" - Wert.
    CSS-Tricks geben, eine gute Lösung, nur vergessen das "zu" und legen Sie die Breite der inline 😉
    http://css-tricks.com/animate-to-an-inline-style/

    InformationsquelleAutor Zetura

  4. 0

    Diese Lösung klingt wie eine Menge, die Sie möglicherweise bereits implementiert, aber es ist sehr gut erklärt und durchdacht:
    Set-Webkit-Keyframes Werte Mithilfe Von Javascript-Variablen

    InformationsquelleAutor flyingace

  5. -1

    als @Zetura gesagt ist der beste Weg, es zu tun ist, zu vergessen, die "zu" - Eigenschaft, und es wird der default-Wert der Breite oder der Höhe oder jede Sache, die Sie legen Sie es auf den
    als Beispiel für mich :

    @keyframes slideInUp {
    0% {
        height: 0px;

    }

}

    InformationsquelleAutor Karim Haddad

Schreibe einen Kommentar