transition funktioniert nicht..warum?

unkown-6363 · 22. November 2012

Der Transitioneffekt funktioniert nicht :-/
Oder kommt der mit background:image nicht klar?

Code

<nav id="primary">            <!-- Navigation zwischen meinen Projekten -->            <ul>                <li>Blog</li>                <li>Programmierung                    <!--<ul>                        <li>Webentwicklung</li>                        <li>Java</li>                    </ul>-->                </li>                <li>Sonstige Projekte                    <!--<ul>                        <li>Schere-Stein-Papier-Echse-Spock</li>                    </ul>-->                </li>                <li>Kontakt</li>            </ul>        </nav>

reset.css

CSS

header, nav, article, section, aside, footer{     display: block;    margin: 0;    padding: 0;    border: none;    outline: none;}body, html, form, input, label, p, a, span, pre, ul, ol, li, div{    margin: 0;    padding: 0;    border: none;    outline: none;}h1, h2, h3, h4, h5, h6{    font-size: 1em;/* "killen" der Standartwerte. Zum Beispiel ist h1 2em */    margin: 0;    padding: 0;}

main.css

CSS

html, body{    font-family: Calibi, Arial, sans-serif;    font-size: 13px;    line-height: 1.42em;    color: #333;    min-width: 800px;}nav#primary{    height: 20px;    /* IE10 Consumer Preview */     background-image: -ms-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%);    /* Mozilla Firefox */     background-image: -moz-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%);    /* Opera */     background-image: -o-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%);    /* Webkit (Safari/Chrome 10) */     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F5F5F5), color-stop(1, #FFFFFF));    /* Webkit (Chrome 11+) */     background-image: -webkit-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%);    /* W3C Markup, IE10 Release Preview */     background-image: linear-gradient(to bottom, #F5F5F5 0%, #FFFFFF 100%);    box-shadow: 1px 0px 3px #333;}    nav#primary ul    {        font-weight: 900;        line-height: 20px;        height: 20px;    }    nav#primary li    {        display: block;        float: left;        text-align: center;        width: 25%;        margin: 0 auto;        -moz-transition:     all 1s ease;        -webkit-transition:  all 2s ease;        -ms-transition:      all 1s ease;        -o-transition:       all 1s ease;        transition:          all 1s ease;        /*         * Die :hover Effekte werden zu einer sanften Animation         */    }        nav#primary li:hover        {            /* IE10 Consumer Preview */             background-image: -ms-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%);            /* Mozilla Firefox */             background-image: -moz-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%);            /* Opera */             background-image: -o-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%);            /* Webkit (Safari/Chrome 10) */             background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ECECEC), color-stop(1, #FFFFFF));            /* Webkit (Chrome 11+) */             background-image: -webkit-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%);            /* W3C Markup, IE10 Release Preview */             background-image: linear-gradient(to bottom, #ECECEC 0%, #FFFFFF 100%);        }.clearLeft{    clear: left;}

cottton · 22. November 2012

Dir fehen die Angaben was geändert werden soll.
Ich weiss ja nicht, was du eigtl ändern wolltest,
aber ich hab dir mal ne geänderte width und color reingehauen.

Also im
nav#primary li
setzt du zB color black,
und in :hover setzt ddu white.
somit hat das ding erst eine "zutat" =)

Ist btw echt genial was man damit machen kann, nicht?
Hab mich sehr lange an dem thema aufgehalten ;D

HTML

<!doctype html>
<html>




<head>
    <title>Titel</title>




    <meta charset="ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />




<style type="text/css">
header, nav, article, section, aside, footer
{
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}




body, html, form, input, label, p, a, span, pre, ul, ol, li, div
{
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}




h1, h2, h3, h4, h5, h6
{
    font-size: 1em;/* "killen" der Standartwerte. Zum Beispiel ist h1 2em */
    margin: 0;
    padding: 0;




}




html, body
{
    font-family: Calibi, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.42em;
    color: #333;
    min-width: 800px;
}
nav#primary
{
    height: 20px;




    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F5F5F5), color-stop(1, #FFFFFF));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #F5F5F5 0%, #FFFFFF 100%);




    box-shadow: 1px 0px 3px #333;
}
    nav#primary ul
    {
        font-weight: 900;
        line-height: 20px;
        height: 20px;
    }
    nav#primary li
    {
        display: block;                                                                                     color: #333;
        float: left;
        text-align: center;
        width: 25%;
        margin: 0 auto;




        -moz-transition:     all 1s ease;
        -webkit-transition:  all 2s ease;
        -ms-transition:      all 1s ease;
        -o-transition:       all 1s ease;
        transition:          all 1s ease;
        /*
         * Die :hover Effekte werden zu einer sanften Animation
         */




    }
    nav#primary li:hover
    {                                                                                                 width: 30%;   color: #FF0000;
        /* IE10 Consumer Preview */
        background-image: -ms-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%);
        /* Mozilla Firefox */
        background-image: -moz-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%);
        /* Opera */
        background-image: -o-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%);
        /* Webkit (Safari/Chrome 10) */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ECECEC), color-stop(1, #FFFFFF));
        /* Webkit (Chrome 11+) */
        background-image: -webkit-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%);
        /* W3C Markup, IE10 Release Preview */
        background-image: linear-gradient(to bottom, #ECECEC 0%, #FFFFFF 100%);
    }
.clearLeft
{
    clear: left;
}
</style>
</head>




<body>
<nav id="primary">
    <!-- Navigation zwischen meinen Projekten -->
    <ul>
        <li>Blog</li>
        <li>Programmierung
            <!--<ul>
                <li>Webentwicklung</li>
                <li>Java</li>
            </ul>-->
        </li>
        <li>Sonstige Projekte
            <!--<ul>
                <li>Schere-Stein-Papier-Echse-Spock</li>




            </ul>-->
        </li>
        <li>Kontakt</li>
    </ul>
</nav>
</body>
</html>

Alles anzeigen

unkown-6363 · 22. November 2012

Schau mal in die Farbverläufe..der erste Wert sollte sich ändern!

cottton · 22. November 2012

Verstehe. Geht wohl (noch) nicht.
Ich glaube gelesen zu haben, dass nur das "normalo" zeugs funktioniert (width, height, color ect)

aber evtl hift das: http://stackoverflow.com/quest…-for-gradient-transitions

Zitat

I'm using a workaround. Instead of animating the gradient, I'm using a semi-transparent gradient ...

Zitat

It is possible to make a transition on gradients using a little hack:...

Edit: das mit dem bg color und der transparenz sieht sinnvoll aus =)

transition funktioniert nicht..warum?

Jetzt mitmachen!

Teilen