Problemy z css pod operą Opcje

[mskiba]

Witam, testuje sobie animacje w css3 i napotkałem problem z operą.

Strona: http://web2you.pl/css3/ pod chrome i ff działa, pod IE 6 i 8 nie działa (to mnie nie dziwi), ale zdziwiło mnie że pod operą też nie działa.

Z tego co widzę, to opera ignoruje left.

[PHP] pobierz, plaintext 
#content #ofirmie { width: 300px; height: 99px; position: absolute; top: 0; right: 0; z-index: 100; border-bottom: 1px solid #000; 
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to right,  #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 */
}
#content #ofirmie a { display: block; width: 100px; height: 50px; line-height: 50px; position: absolute; top: 50%; margin-top: -25px; left: 50%; margin-left: -50px; text-decoration: none; color: #000; font-size: 1.8em; font-weight: bold; }
#content #ofirmie-container { overflow: auto; width: 724px; height: 100px; position: absolute; top: 0; left: 724px; z-index: 99; 
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 47%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 47%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#ededed 47%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 47%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#ededed 47%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
animation-name:ofirmie; animation-duration:2s; animation-iteration-count:1; animation-play-state:paused; animation-fill-mode:forwards;
-webkit-animation-name:ofirmie; -webkit-animation-duration:2s; -webkit-animation-iteration-count:1; -webkit-animation-play-state:paused; -webkit-animation-fill-mode:forwards;
-moz-animation-name:ofirmie; -moz-animation-duration:2s; -moz-animation-iteration-count:1; -moz-animation-play-state:paused; -moz-animation-fill-mode:forwards;
-o-animation-name:ofirmie; -o-animation-duration:2s; -o-animation-iteration-count:1; -o-animation-play-state:paused; -o-animation-fill-mode:forwards;
}
@keyframes ofirmie { 
0% { [color="#FF0000"][b]left: 724px;[/b][/color] }
25% { left: 0; top: 0; height: 100px; } 
50% { left: 0; top: 0; height: 500px; }
75% { left: 0; top: 0; height: 500px; }
100% { left: 0; top: 0; height: 500px; } 
}
@-webkit-keyframes ofirmie { 
0% { left: 724px; }
25% { left: 0; top: 0; height: 100px; } 
50% { left: 0; top: 0; height: 500px; }
75% { left: 0; top: 0; height: 500px; }
100% { left: 0; top: 0; height: 500px; } 
}
@-moz-keyframes ofirmie { 
0% { left: 724px; }
25% { left: 0; top: 0; height: 100px; } 
50% { left: 0; top: 0; height: 500px; }
75% { left: 0; top: 0; height: 500px; }
100% { left: 0; top: 0; height: 500px; } 
}
@-o-keyframes ofirmie { 
0% { left: 724px; }
25% { left: 0; top: 0; height: 100px; } 
50% { left: 0; top: 0; height: 500px; }
75% { left: 0; top: 0; height: 500px; }
100% { left: 0; top: 0; height: 500px; } 
}
#content #ofirmie-text { margin: 20px; -moz-opacity: 0; opacity: 0; filter:alpha(opacity=0); 
animation-name:ofirmie-text; animation-duration:1s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:500ms;
-webkit-animation-name:ofirmie-text; -webkit-animation-duration:1s; -webkit-animation-iteration-count:1; -webkit-animation-fill-mode:forwards; -webkit-animation-delay:500ms;
-moz-animation-name:ofirmie-text; -moz-animation-duration:1s; -moz-animation-iteration-count:1; -moz-animation-fill-mode:forwards; -moz-animation-delay:500ms;
-o-animation-name:ofirmie-text; -o-animation-duration:1s; -o-animation-iteration-count:1; -o-animation-fill-mode:forwards; -o-animation-delay:500ms;
}
@keyframes ofirmie-text { 
0% { -moz-opacity: 0; opacity: 0; filter:alpha(opacity=0); }
100% { -moz-opacity: 1; opacity: 1; filter:alpha(opacity=100); } 
}
@-webkit-keyframes ofirmie-text { 
0% { -moz-opacity: 0; opacity: 0; filter:alpha(opacity=0); }
100% { -moz-opacity: 1; opacity: 1; filter:alpha(opacity=100); } 
}
@-moz-keyframes ofirmie-text { 
0% { -moz-opacity: 0; opacity: 0; filter:alpha(opacity=0); }
100% { -moz-opacity: 1; opacity: 1; filter:alpha(opacity=100); } 
}
@-o-keyframes ofirmie-text { 
0% { -moz-opacity: 0; opacity: 0; filter:alpha(opacity=0); }
100% { -moz-opacity: 1; opacity: 1; filter:alpha(opacity=100); } 
}
#content #ofirmie-text p { margin: 20px; text-align: justify; font-size: 1.2em; }
[PHP] pobierz, plaintext 

Z góry dziękuję za pomocne sugestie.

[StrefaPi]

a która wersja tej opery?

aktualnie na stronie opera.com jest opera 18, która działa na WebKit i jest zgodna z Safari i Chrome /sprawdziłem u mnie animacje działają na operze/

Ten post edytował StrefaPi 4.01.2014, 11:10:13

[mskiba]

Wersja
12.16

W aktualizacjach pokazuje ze nie ma nowszej wersji dla mojego systemu (Fedora) :/

Ale dzieki za cenne info (IMG:style_emoticons/default/wink.gif)

[StrefaPi]

a no to troszkę stara (to chyba już zaraz nie będzie wspierana wersja)... dla pc i mac są wersje 18 i next 19

chociaż opera w dokumentacji do presto opisuje, że wspiera w pełni animacje css3 [http://www.opera.com/docs/specs/presto2.11/css/animations/]

Ten post edytował StrefaPi 4.01.2014, 12:28:40

[mskiba]

[HTML] pobierz, plaintext 
Informacje o wersji
Wersja
12.16 
Kompilacja
1860 
Platforma
Linux 
System
i686, 3.5.1-1.fc17.i686.PAE 
Identyfikacja przeglądarki
 
Opera/9.80 (X11; Linux i686) Presto/2.12.388 Version/12.16
[HTML] pobierz, plaintext 

Wiec animacje powinny działa, mimo to nie działaja :/ A jesli chodzi o LINUX-a to skonczyli chyba wydawac przy wlasnie tej wersji. Ta ostatnia jest na stronie opery.

Ten post edytował mskiba 5.01.2014, 18:16:31