[GastForen Web allgemein HTML und CSS / Stylesheets CSS3 animations - keyframe

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

CSS3 animations - keyframe

sejau
Beiträge gesamt: 298

5. Dez 2011, 15:40
Beitrag # 1 von 1
Bewertung:
(926 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo zusammen

Ich möchte für diejenigen Browser die CSS3 unterstützen einige kleine hover-Specials einbauen. Das geht auch rel gut soweit,
jedoch ist es so, dass ich bei einem button die Hintergrundfarbe von blau zu einem rot mit pink-stich transformieren lasse.
Leider geht dabei die Animation über ein Violett, was bewirkt dass der Übergang von blau (hell) zu violett (dunkel) zum rot(hell) geht und etwas seltsam aussieht.

Nun wollte ich zusätzlich für diejenigen Browser, dies unterstützen dort den Übergang per keyframe transitions machen.
Geht das, dass ich mit den Keyframe transitions die andere Animation überschreibe?

Code
 
#header li {
background-color: #51b3d5;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

#header li:hover {
background-color: #e91b5d;
}


Damit wird mir die violette Zwischenfarbe gezeigt.

Nun wollte ich so etwas einbauen, doch bis jetzt funktionierts nicht. (Geht das denn überahupt??:)

Hier mal nur für webkit:

Code
@-webkit-keyframes hovering { 
0% {
background: #51b3d5;
}

50% {
background: #B48492;
}

100% {
background: #e91b5d;
}
}


und dann:

Code
#header li:hover { 
background-color: #e91b5d;
-webkit-animation: hovering 1.5s infinite ease-in-out;
}


Irgendwie klappt das zwar, aber bei Mouseout etc gibts immer noch Bugs.
Ist das überhaupt sicher, so wie ich das mache, oder ist das zu heikel, um eine schöne Darstellung zu erlangen?

Vielen Dank für Tipps hierzu.

Cheers
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/