zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden fade-in DOWN Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.06.2015, 18:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2015
Beiträge: 9
chefkoch89 befindet sich auf einem aufstrebenden Ast
Standard fade-in DOWN Problem

Hallo Leute,

ich habe ein Problem mit einer CSS-Animation.
Und zwar arbeite ich mit einem Page-Builder in dem Boxen mit z.B. HTML-Schnipseln gefüllt werden.

Ich habe mir eine Class erstellt: <div class="wg_head"> und eine id #before-content41 ... die schon über css ein wenig hübsch gemacht ist (Abgerundete Boxen mit einem Hintergrundbild und einem Hovereffekt).

Nun möchte ich dass diese Boxen wenn die Seite aufgerufen wird mit einer fade-in DOWN Animation einblenden lassen.

Den Basis-Code für die Animation habe ich zwar, aber ich krieg es nicht hin die Animation korrekt zuzuordnen. Bitte helft mir

Code:
.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes fadeInDown { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(-20px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes fadeInDown { 
    0% { 
        opacity: 0; 
        transform: translateY(-20px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 

.fadeInDown { 
    -webkit-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.06.2015, 12:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2015
Beiträge: 9
chefkoch89 befindet sich auf einem aufstrebenden Ast
Standard Gelöst

So habe nun mein Problem selber lösen können.
Wichtig war " animated fadeInDown" in den Klassennamen hinzuzufügen und die Animation in meiner indi.css richtig zu platzieren.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
animation, css

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
Problem mit CSS/Jquery Drop Down Menü nightmind CSS 17 09.07.2012 11:37
Drop Down Menu Problem arosarius CSS 6 02.05.2012 19:29
Problem mit Text neben Navigationsleiste andi01 CSS 6 08.06.2011 17:54
Fade Effekt: Problem mit position absolute Alien CSS 0 15.05.2007 00:09
Drop Down Menu: focus Problem enoo CSS 8 20.03.2007 18:51


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