CSS Transition nu functioneaza in Firefox si IE 10

Salutare, am urmatorul cod care merge in Chrome:

.generatoare {
float: left;
position: relative;
width: 225px;
height: 155px;
border-top: #bb2921 2px solid;
background: url('../images/produse/generatoare.png') no-repeat top left;
transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
}

.generatoare:hover {
background: url('../images/produse/generatoare-h.png') no-repeat top left;
transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
}

Problema este ca merge DOAR in Chrome (nu am incercat Opera), in Firefox sau Internet Explorer nu da nici un semn de funtionalitate.
Are cineva idee care ar fi problema?

Edited by Alexandrwc, 03 July 2013 - 09:28.

Pai cum  ar putea sa mearga daca nu ai pus si ce tip de tranzitie sa faca?
http://www.w3schools...transitions.asp

Tipul tranzitiei gen transition: background 0.3s; nu este necesar in cazul meu am incercat si asa si la fel, nu merge

Daca nu dai un tip de tranzitie, CSS o ia ca si cum ai pune "all" si aplica la toate proprietatile tranzitia, dar daca eu am si la clasa si la :hover state acleasi proprietati in afara de background de ce as mai da tipul de tranzitie? Sper ca ai inteles, oricum nu aste e problema problema este ca nu functioneaza in Firefox si daca intru pe w3schools.org si incerc de acolo exemple... merg

Nu cred ca este vreo problema in reset:

/*//////////// 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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font-family: inherit;
background: transparent;
}

Edited by Alexandrwc, 03 July 2013 - 09:54.

background-image nu e in lista standard de proprietati suportate pentru tranzitii.

Pentru ce vrei tu cred ca poti folosi opacity, desi nu e tocmai straight-forward CSS-ul necesar.

Daca doar in Chrome functioneaza inseamna ca e un feature non-standard. Dovada e faptul ca functioneaza doar daca folosesti -webkit-transition.

Multumesc sergiu_spooky, ai dreptate, dar de ce merge in Chrome atunci, doar cu transition, fara vendor prefix?

Asta inseamna ca trebuie sa ma complic daca vreau sa fac acest efect valabil pentru toate browserele

Trebuie sa fac un div caruia sa ii dau un background-image si in acel div sa bag o imagine careia sa-i controlez opacity cu transition of of

Edited by Alexandrwc, 03 July 2013 - 10:23.

Nu stiam ca merge fara prefixul -webkit.
Inseamna ca Google incearca ceva stil IE/Netscape browser wars (nu ca n-am fi stiut deja asta ) cand Microsoft a fortat un standard agreat de ei fiindca puteau si ii avantaja.

Pfff... din cate am inteles eu Google vor sa renunte la Webkit si lucreaza la un nou motor web (numit Blink)... misto, alta grija de luat in considerare, nu era de ajuns IE.
Am mai citit si ca Google vor renunta la vendor prefix-uri pentru experimental features si Firefox adopta aceeasi tactica, asa ca, no more -moz-, -webkit- (asta tot va trebui pentru Safari).

Multam sergiu

Edited by Alexandrwc, 03 July 2013 - 10:46.

Ca să nu mai deschid alt topic, până la urmă, s-a găsit rezolvare?

Da, folosesti doua div-uri suprapuse, fiecare cu background-image-ul lui si te joci cu opacity (care e suportat intr-un fel sau altul de orice browser de la ie6 incoace) pe ele.

Sergiu, aici era vb ca nu merge tranzition, nu opacity

Eu as recomanda sa faci un div cu un background si in acel div sa pui o imagine, iar cand dai hover pe imagine sa i se schimbe opacitatea.

jQuery cu animate on hover, setezi exact cat sa dureze animatia si te asigur ca e cu tranzitie, cea mai bun varianta.
merge si cu css, nu stiu cat de bun e codul tau, uite aici unul bun, pune-l atat la clasa cat si la clasa:hover:

-webkit-transition-duration:0.5s;
transition-duration: 0.5s;

il folosesc eu, merge pe chrome/firefox/safari.

Edited by ebounty, 24 July 2013 - 19:02.

ebounty invata diferenta dintre niste valori normale si valori "shorthand".

border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;

Este acelasi cu:

border: 1px solid red;

Sper ca ti-am dat un hint.

Edited by Alexandrwc, 25 July 2013 - 09:08.