zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS3 Animation mit -webkit-animation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.08.2012, 13:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.08.2012
Beiträge: 5
Seerius befindet sich auf einem aufstrebenden Ast
Standard CSS3 Animation mit -webkit-animation

Hallo zusammen,
habe mit das Buch "WebApps mit HTML5 und CSS3" gekauft. XHTML und CSS2 sind mir relativ vertraut, Animationen mit -webkit-animation habe ich bisher noch nie gemacht.

In dem Beispiel soll ein rotes Quadrat animiert werden. Als HTML habe ich
HTML-Code:
<div class="quadrat"></div>
und im CSS steht

PHP-Code:
@-webkit-keyframes flavius {
    
0% {
    }
    
50% {
        
margin-top0px;
        
margin-left50px;
        
background-color#f00;
    
}
    
100% {
        
margin-top50px;
        
margin-left50px;
        
background-color#ff0;
    
}
}

.
quadrat {
    
height50px;
    
width50px;
    
background-color#f00;
    
    
-webkit-animation nameflavius;
    -
webkit-animation-duration4s;
    -
webkit-animation-iteration-count10;
    -
webkit-animation-directionalternate;
    -
webkit-animation-timing-function: linear;
    -
webkit-animation-delay1s;
    -
webkit-animation-fill-modenone;

Nun tut sich leider gar nichts, keine Animation weit und breit zu sehen beim Aufruf im Safari oder auf dem iPhone. Hat einer eine Idee woran das liegen könnte?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.08.2012, 13:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Es fehlt ein Bindestrich.
-webkit-animation-name
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.08.2012, 13:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.08.2012
Beiträge: 5
Seerius befindet sich auf einem aufstrebenden Ast
Standard

Danke!
Mit Zitat antworten
Antwort

Stichwörter
animation, css3, webkit

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
HTML5 & CSS3 Quiz joocom Ressourcen 12 30.03.2012 13:43
CSS3 Adventskalender Webstandard Ressourcen 0 05.12.2011 09:57
Veranstaltungstipp - MMT 28 "Webtechnologien - HTML5, CSS3 & Co" - Köln MediaPark hemfrie Offtopic 2 20.10.2011 10:00
CSS Ninja / Möglichkeit, CSS3 Animationen zu timen? Unsk1ll3d CSS 6 23.12.2010 13:32
CSS3: Multi-column layout | Safari ? ulle CSS 13 07.01.2006 13:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:27 Uhr.