Elektroda.pl
Elektroda.pl
X
Proszę, dodaj wyjątek www.elektroda.pl do Adblock.
Dzięki temu, że oglądasz reklamy, wspierasz portal i użytkowników.

Firefox nie widzi animacji w CSS 3

zolwik03 02 Sty 2013 17:49 1248 2
  • #1 02 Sty 2013 17:49
    zolwik03
    Poziom 9  

    Stworzyłem stronę, w której umieściłem animacje diva za pomocą CSS 3. Po kliknięciu na menu z góry wysuwa się div z obrazkiem, i po ponownym kliknięciu chowa się. To kod na animację "wsuwania" diva na ekran:

    Code:
    div#wej1{ 
    
            z-index: 3;
        -moz-animation: 2s wej1;   
       position: absolute;
       left: 50%;
       top: -20%; 
       margin-left: -402px;
    }
    @-moz-keyframes wej1 {
     
        from {
       left: 50%;
       top: -200%;
       margin-left: -402px;
        }
       
       to {
        left: 50%;
        top: -20%;
       margin-left: -402px;
        }

    }

    Podobny jest z chowaniem się diva, zmienione tylko jego położenie.

    Mam zrobionych kilka takich menu, do każdego jest przypisana taka sama animacja. Problem polega na tym, że w Firefoxie działa tylko pierwsza animacja, potem jak klikam w menu, to div się pojawia, ale już bez animacji. Po odświeżeniu strony to samo. Na Chrome (po zmianie przedrostka z -moz- na -webkit-) wszystko działa elegancko, każda animacja się odtwarza.

    Dodam, że tatką animację:
    Code:
    -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;
    }
    nav#menu ul div:hover p{
       left: 0px;
       
       -moz-transform: rotate(360deg);
       -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);

    Mozilla odtwarza bez problemu.

    Nauczyciel podpowiedział, że może powinienem wyłączyć wczytywanie z cache, jednak nic więcej nie wspomniał, a ja tego znaleźć nie mogłem.

    Proszę o pomoc.

    0 2
  • #2 03 Sty 2013 11:29
    arnoldziq
    Moderator Programowanie

    Proszę umieścić cały kod HTML strony wraz z skryptami. Jeżeli skrypty są umieszczone w osobnym pliku, to proszę zachować strukturę katalogów.

    0
  • #3 03 Sty 2013 21:58
    zolwik03
    Poziom 9  

    Kod: html4strict
    Zaloguj się, aby zobaczyć kod


    Kod: css
    Zaloguj się, aby zobaczyć kod

    0