Avatar billede Vaffel Nybegynder
19. juni 2012 - 14:33 Der er 17 kommentarer og
1 løsning

CSS Transitions virker ikke i Firefox

Hej :-)
Jeg har et problem. Jeg har lavet, så et billede ved hover skifter. Det er gjort med en div, hvor baggrundsbilledet skifter ved :hover. Det virker fint, men i Firefox gider den ikke tage min

[code]    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
[/code]

med. I Chrome virker det fuldstændig, som det skal. Koden ser således ud:

[code]
.banner{
    background-image:url(../img/banner.png);
    height:271px;
    background-repeat:no-repeat;
    width:1020px;
    margin:0px auto;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}

.banner:hover{
    background-image:url(../img/banner2.png);
}
[/code]

Nogen, der ved hvorfor? :-)
Avatar billede olebole Juniormester
19. juni 2012 - 14:39 #1
<ole>

Er du sikker på, den ikke gider? Jeg har endnu aldrig hørt om en browser, der led af dovenskab.

Prøv at lægge et link til siden

/mvh
</bole>
Avatar billede scootergrisen Nybegynder
19. juni 2012 - 15:30 #2
Det er sikkert fordi det der fade mellem billeder endnu ikke er blevet kodet ind i Firefox.
CSS3 transform er jo meget ny så forvent ikke at alt sammen virker.
Det virker heller ikke i Opera, Safari, Internet explorer.

Du kan se hvis du skriver :

      .banner:hover{
        width:820px;
        background-image:url(billeder/billed0008.jpg);
      }

Så kan du se at det virker med transition men at det bare er det med billederne der ikke fader der ikke virker endnu.
Avatar billede olebole Juniormester
19. juni 2012 - 15:53 #3
<ole>

#2: Der er jo netop taget højde for understøttelse i Firefox, Opera, Safari (og Chrome) med:

Safari/Chrome/de fleste mobiler: -webkit-transition: background 0.5s linear;

Firefox: -moz-transition: background 0.5s linear;

Opera: -o-transition: background 0.5s linear;

- og fremtiden: transition: background 0.5s linear;

/mvh
</bole>
Avatar billede scootergrisen Nybegynder
19. juni 2012 - 16:21 #4
#3 > ja og hvad så derfor virker det stadig ikke. Kun delvist. Billedet skifter men det fader ikke.
Avatar billede Vaffel Nybegynder
19. juni 2012 - 17:10 #5
Så det er slet ikke muligt? Jeg fandt koden på nettet, så regnede med at det ville fungere :-)
Avatar billede scootergrisen Nybegynder
19. juni 2012 - 17:35 #6
#5 > Hvad er slet ikke muligt ?
Hvor fandt du koden ?

Det virker delvist i Firefox.
Demo : http://scootergrisen.dk/test/test0124.html
Avatar billede olebole Juniormester
19. juni 2012 - 18:01 #7
Det virker ganske fint - test selv. Men at det ikke fungerer i IE, er vel ikke så underligt, når den er den eneste browser, der ikke kodes til  =)

Microsoft var dem, der indførte transitions i en browser - helt tilbage før årtusindskiftet. IE kræver - som de andre browsere - foreløbigt sin egen kode. Klik på det første kodeeksempel
Avatar billede Vaffel Nybegynder
19. juni 2012 - 18:22 #8
Har selv været inde på http://css3.bradshawenterprises.com/cfimg1/, men heller ikke det gav resultater i Firefox - jeg ved selvfølgelig ikke, om jeg bare gør det forkert ... Deraf spørgsmålet ;-)
Avatar billede olebole Juniormester
19. juni 2012 - 18:28 #9
Jeg forstår ikke, hvad du mener. Virker http://css3.bradshawenterprises.com/cfimg1/ ikke i din Firefox - eller kan du ikke få koden til at virke i Firefox, når du selv prøver at skrive den?
Avatar billede scootergrisen Nybegynder
19. juni 2012 - 18:55 #10
Jeg har lavet et eksempel ud fra det link :
http://scootergrisen.dk/test/test0124.html

Men der sker ikke det samme som i den første kode.
I den første kode der skiftes det mellem 2 billeder.

I det nye med opacity der ændres transparences bare fra 100% til 0% for et af billederne.

Men det måske godt nok ?

-ms-transition virker ikke i Internet explorer 9.
Så det kommer sikkert først til at virker i verson 10 af den browser.
Men det virker i nyeste version af de andre browsere.
Avatar billede Vaffel Nybegynder
19. juni 2012 - 18:59 #11
Jo, altså, men jeg vil jo have den til at virke med min egen kode :-) Jeg vil ikke have det med opacity'en skifter, det skal jo være mellem de to billeder, og det kan jeg bare ikke få til at fungere.
Avatar billede olebole Juniormester
19. juni 2012 - 19:12 #12
Jamen, så kan du jo ligeså godt lukke spørgsmålet. Du spørger vel netop, fordi din egen kode ikke virker. Derfor har du brug for en anden kode, som virker  =)

Du er heller ikke særlig let at hjælpe, når du ikke svarer på de spørgsmål, vi stiller. Hvad var svaret på #9?
Avatar billede scootergrisen Nybegynder
19. juni 2012 - 19:17 #13
Så må du vente til det virker i Firefox.
Altså koden er jo fin nok og billedet skifter så du skal ikke lave om på noget.

Sådan er det når man bruger ny kode så virker det ikke altid helt.
Avatar billede olebole Juniormester
19. juni 2012 - 19:30 #14
Koden, der bliver brugt i #9 fungerer helt efter hensigten i FF. Hvad er problemet?
Avatar billede Vaffel Nybegynder
19. juni 2012 - 21:13 #15
Scootergrisen,

kiggede på dit eksempel og prøvede det selv af. Herefter virkede det sørme, så tusind tak! Du må gerne lave et svar, så får du dine point :-)

-Line
Avatar billede scootergrisen Nybegynder
19. juni 2012 - 22:17 #16
#15 > Men det virker da ikke på mit eksempel. Kun der hvor jeg brugte opacity men det ville du jo ikke bruge.

Har du et link til hvor du bruge det eller kan du skrive koden, vil gerne se hvad du mener.
Avatar billede Vaffel Nybegynder
19. juni 2012 - 22:38 #17
Det var den med opacity, der virkede. Tror jeg forstod din forklaring forkert, så det beklager jeg :-)
Avatar billede scootergrisen Nybegynder
19. juni 2012 - 22:53 #18
Nå ok jamen er så forvirringen jo total men bare det virker.
Men det var vist noget med det ikke virker i Internet explorer.
Ellers må du skrive igen.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester