Animationsproblem? Text beim Start Fett

Antiax

Grünschnabel
Hallo Zusammen!

Ich habe das Problem das meine Texte/Links, beim Start des Sliders, überlagert werden, bzw. in Fett erscheinen und beim zweiten Slide erst wieder normal werden. Im meinen Fall ist es der Home Link, welcher anfänglich immer erst in Fett erscheint. Habe es auch schon mit anderen Texten, in anderen Containern versucht und auch mit anderen Skripts. Leider komme ich nicht auf den Fehler und habe schon Stunden danach gegrübelt und gegoogelt. Nach meiner Logik sollte es Funktionieren, da die Animation in anderen Containern stattfindet, aber, na ja, leider will es nicht wie ich mag
frown.png


Ich hoffe mir kann hier jemand helfen und auch die Logik des Fehlers erklären. Würde es gerne verstehen um später die Animation noch anzupassen.

Hier der Link zur meiner Testseite: http://test.renohelp.info

Das HTML Skript:



HTML-Code:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>testserver</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/style1.css"  rel="stylesheet" type="text/css" /></head><body><! ------------- Start head ---------------->
<div id="head">
    <div class="logo">        <a href="index.php"><img src="images/logo.png" alt="logo"></a>    </div>    <div class="schriftzug">        <a href="index.php"><img src="images/schriftzug.png" alt="logo"></a>    </div></div><! ------------- Ende head ----------------><! ------------- start navigation ----------------><div id="nav">    <div id="links">        <ul>            <li id="links_box" class="btn">                        <a href="index.php">Home</a>                                </li>
        </ul>    </div></div><! ------------- Begin Slider ----------------><div class="browser"><div id="slider_box">    <div id="slider_inhalt">        <div id="slider_maske">            <ul>            <li id="eins" class="ani1">            <a href="#"> <img src="images/slider_bild1.png" alt="Steinteppich"/></a>                <div class="textfenster">                <h1>Steinteppich </h1>                </div>                <div class="test">                <h1>Der Allrounder für Innen und Außen</h1>                </div>            </li>            <li id="zwei" class="ani2">            <a href="#"> <img src="images/slider_bild2.png" alt="Trockenbau"/></a>                <div class="textfenster">                <p><h1>Trockenbau</h1>test</p>                </div>                 <div class="test">                <h1>Räume individuell anpassen</h1>                </div>
            </li>            <li id="drei" class="ani3">            <a href="#"> <img src="images/slider_bild3.png" alt="Tapetten"/></a>                <div class="textfenster">               <h1>Bodenvielfalt</h1>               </div>                <div class="test">                <h1>Laminat • Parkett • Vinyl • Steinteppich</h1>                </div>
            </li>            <li id="vier" class="ani4">            <a href="#"> <img src="images/slider_bild2.png" alt="Cougar"/></a>                <div class="textfenster">                <h1>Cougar</h1>                </div>            </li>
             <li id="fuenf" class="ani5">            <a href="#"> <img src="images/slider_bild1.png" alt="Cougar"/></a>                <div class="textfenster">                <h1>Cougar</h1>                </div>            </li>                       </ul>                    </div>         <div class="progress-bar">         </div>    </div></div></div><! ------------- Ende Slider ----------------->
</body></html>

Das CSS Skript:

HTML:
/* Reset */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
}




/* Common */
html, body {


    background-color: #000;
    font-size:16px;
    font-family: Arial;
    margin:auto;
    padding:0;
    color:#aaa;
}






/* HEAD */
#head {
    width: 900px;
    margin: auto;
    
}
#head .logo {
    margin-top: 20px;
    margin-left: 40px;
    width: 180px;
    height: 180px;
}
#head .schriftzug {
    margin-top: -180px;
    margin-left: 220px;
    width: 700px;
    height: 100px;


}
/* navigation */


#nav {
    margin: auto;
    margin-top: 45px;
    width: 910px;
    height: 45px;


}
#links {
    margin: auto;
    position: relative;
}
#links_box {


    width: 870px;
    height: 45px;
    margin-left: 5px;
    position: absolute;
}
.btn {
    font-size: 22px;
    
    margin-left: 20px;
    padding-left: 20px;
    padding-top: 5px;
    background:#eaeaea url(../images/btn_blau.png) no-repeat;
}
.btn li{
        display: block;
}
.btn a:link {
    color: #d2d2d2;
    


}
.btn a:active{
    background-color: #7e7e7e;
    color: #ffffff;
}
.btn a:hover {
    background:#eaeaea url(../images/btn_blau.png) no-repeat;
    color: #d2d2d2;
}
.btn a:visited {
    background-color: #000;
    color: #d2d2d2;
}


#links_box ul {
    margin:0;
    padding:0;
    position:relative;
}
#links li {
    list-style: none;
}
#link_eins {
    font-size: 20px;
    color: red;
}
/* LAYOUT */
.browser {
    margin:0 auto;
    overflow:hidden;
    width:915px;
}


/* CONTENT SLIDER  (slider-box) */
#slider_box {
    width:100%;
    height:320px;
    margin:10px auto 0;
}
/* SLIDER (slider-inhalt)*/
#slider_inhalt {
    background:#000;
    border:2px solid #eaeaea;


    height:290px;
    width:900px;
    margin:10px auto 0;
    overflow:visible;
    position:relative;
}
/* SLIDER (slider-maske) */
#slider_maske {
    overflow:hidden;
    height:290px;
}
#slider_inhalt ul {
    margin:0;
    padding:0;
    position:relative;
}
#slider_inhalt li {
    
    height:290px;
    position:absolute;
    top:-325px;
    list-style:none;
}


#slider_inhalt li.ani1 {
    -moz-animation:cycle 25s linear infinite;    
    -webkit-animation:cycle 25s linear infinite;        
}
#slider_inhalt li.ani2 {
    -moz-animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite;        
}
#slider_inhalt li.ani3 {
    -moz-animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;        
}
#slider_inhalt li.ani4 {
    -moz-animation:cyclefour 25s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;        
}
#slider_inhalt li.ani5 {
    -moz-animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;        
}


#slider_inhalt .textfenster {
    background:#ffffff;
    height:45px;
    width: 210px;
    position:relative;
    bottom:120px;
    left:-320px;
    opacity: 0.6;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;  
}


#slider_inhalt .textfenster h1 {
    color:#000;
    font-size:24px;
    font-weight:300;
    line-height: 45px;
    margin-left: 20px;






}


#slider_inhalt li#eins .textfenster, 
#slider_inhalt li#zwei .textfenster, 
#slider_inhalt li#drei .textfenster, 
#slider_inhalt li#vier .textfenster, 
#slider_inhalt li#fuenf .textfenster {
    left:0px;




}
#slider_inhalt .test {
    background:#ffffff;
    width: 350px;
    height:35px;
    position:relative;
    bottom:110px;
    left:-320px;
    opacity: 0.6;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;  
}


#slider_inhalt .test h1 {
    color:#000;
    font-size:18px;
    font-weight:300;
    line-height:60px;
    margin-left: 20px;
    line-height: 35px;
}


#slider_inhalt li#eins .test, 
#slider_inhalt li#zwei .test, 
#slider_inhalt li#drei .test, 
#slider_inhalt li#vier .test, 
#slider_inhalt li#fuenf .test {
    left:0px;
}


#slider:hover li, 
#slider:hover .progress-bar {
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
}


/* PROGRESS BAR */
.progress-bar { 
    position:relative;
    top:-5px;
    width:900px; 
    height:5px;
    background:#000;
    -moz-animation:fullexpand 25s ease-out infinite;
    -webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; } 
    16% { top:0px; opacity:1; z-index:0; } 
    20% { top:290px; opacity:0; z-index:0; } 
    21% { top:-290px; opacity:0; z-index:-1; }
    92% { top:-290px; opacity:0; z-index:0; }
    96% { top:-290px; opacity:0; }
    100%{ top:0px; opacity:1; }
    
}
@-moz-keyframes cycletwo {
    0%  { top:-290px; opacity:0; }
    16% { top:-290px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; } 
    36% { top:0px; opacity:1; z-index:0; } 
    40% { top:290px; opacity:0; z-index:0; }
    41% { top:-290px; opacity:0; z-index:-1; } 
    100%{ top:-290px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
    0%  { top:-290px; opacity:0; }
    36% { top:-290px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; } 
    56% { top:0px; opacity:1; } 
    60% { top:290px; opacity:0; z-index:0; }
    61% { top:-290px; opacity:0; z-index:-1; } 
    100%{ top:-290px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
    0%  { top:-290px; opacity:0; }
    56% { top:-290px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:290px; opacity:0; z-index:0; }
    81% { top:-290px; opacity:0; z-index:-1; }
    100%{ top:-290px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
    0%  { top:-290px; opacity:0; }
    76% { top:-290px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:290px; opacity:0; z-index:0; }
}


@-webkit-keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; }
    16% { top:0px; opacity:1; z-index:0; } 
    20% { top:290px; opacity:0; z-index:0; }
    21% { top:-290px; opacity:0; z-index:-1; }
    50% { top:-290px; opacity:0; z-index:-1; }
    92% { top:-290px; opacity:0; z-index:0; }
    96% { top:-290px; opacity:0; }
    100%{ top:0px; opacity:1; }
    
}
@-webkit-keyframes cycletwo {
    0%  { top:-290px; opacity:0; }
    16% { top:-290px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; } 
    36% { top:0px; opacity:1; z-index:0; } 
    40% { top:290px; opacity:0; z-index:0; }
    41% { top:-290px; opacity:0; z-index:-1; }  
    100%{ top:-290px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
    0%  { top:-290px; opacity:0; }
    36% { top:-290px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; } 
    56% { top:0px; opacity:1; z-index:0; } 
    60% { top:290px; opacity:0; z-index:0; } 
    61% { top:-290px; opacity:0; z-index:-1; }
    100%{ top:-290px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
    0%  { top:-290px; opacity:0; }
    56% { top:-290px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:290px; opacity:0; z-index:0; }
    81% { top:-290px; opacity:0; z-index:-1; }
    100%{ top:-290px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
    0%  { top:-290px; opacity:0; }
    76% { top:-290px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:290px; opacity:0; z-index:0; }
}


/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }    
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }    
}
 
Hast du das Problem zwischenzeitlich gelöst bekommen?

Ich frage, weil ich das beschriebene Fehlverhalten nicht registrieren kann.
 
Zurück