Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problemy z css pod operą
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
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.

  1. #content #ofirmie { width: 300px; height: 99px; position: absolute; top: 0; right: 0; z-index: 100; border-bottom: 1px solid #000;
  2. background: #ffffff; /* Old browsers */
  3. background: -moz-linear-gradient(left, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  4. background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  5. background: -webkit-linear-gradient(left, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  6. background: -o-linear-gradient(left, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  7. background: -ms-linear-gradient(left, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  8. background: linear-gradient(to right, #ffffff 0%,#e5e5e5 100%); /* W3C */
  9. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 */
  10. }
  11. #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; }
  12. #content #ofirmie-container { overflow: auto; width: 724px; height: 100px; position: absolute; top: 0; left: 724px; z-index: 99;
  13. background: #ffffff; /* Old browsers */
  14. background: -moz-linear-gradient(top, #ffffff 0%, #ededed 47%, #ffffff 100%); /* FF3.6+ */
  15. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  16. background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 47%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  17. background: -o-linear-gradient(top, #ffffff 0%,#ededed 47%,#ffffff 100%); /* Opera 11.10+ */
  18. background: -ms-linear-gradient(top, #ffffff 0%,#ededed 47%,#ffffff 100%); /* IE10+ */
  19. background: linear-gradient(to bottom, #ffffff 0%,#ededed 47%,#ffffff 100%); /* W3C */
  20. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  21. animation-name:ofirmie; animation-duration:2s; animation-iteration-count:1; animation-play-state:paused; animation-fill-mode:forwards;
  22. -webkit-animation-name:ofirmie; -webkit-animation-duration:2s; -webkit-animation-iteration-count:1; -webkit-animation-play-state:paused; -webkit-animation-fill-mode:forwards;
  23. -moz-animation-name:ofirmie; -moz-animation-duration:2s; -moz-animation-iteration-count:1; -moz-animation-play-state:paused; -moz-animation-fill-mode:forwards;
  24. -o-animation-name:ofirmie; -o-animation-duration:2s; -o-animation-iteration-count:1; -o-animation-play-state:paused; -o-animation-fill-mode:forwards;
  25. }
  26. @keyframes ofirmie {
  27. 0% { [color="#FF0000"][b]left: 724px;[/b][/color] }
  28. 25% { left: 0; top: 0; height: 100px; }
  29. 50% { left: 0; top: 0; height: 500px; }
  30. 75% { left: 0; top: 0; height: 500px; }
  31. 100% { left: 0; top: 0; height: 500px; }
  32. }
  33. @-webkit-keyframes ofirmie {
  34. 0% { left: 724px; }
  35. 25% { left: 0; top: 0; height: 100px; }
  36. 50% { left: 0; top: 0; height: 500px; }
  37. 75% { left: 0; top: 0; height: 500px; }
  38. 100% { left: 0; top: 0; height: 500px; }
  39. }
  40. @-moz-keyframes ofirmie {
  41. 0% { left: 724px; }
  42. 25% { left: 0; top: 0; height: 100px; }
  43. 50% { left: 0; top: 0; height: 500px; }
  44. 75% { left: 0; top: 0; height: 500px; }
  45. 100% { left: 0; top: 0; height: 500px; }
  46. }
  47. @-o-keyframes ofirmie {
  48. 0% { left: 724px; }
  49. 25% { left: 0; top: 0; height: 100px; }
  50. 50% { left: 0; top: 0; height: 500px; }
  51. 75% { left: 0; top: 0; height: 500px; }
  52. 100% { left: 0; top: 0; height: 500px; }
  53. }
  54. #content #ofirmie-text { margin: 20px; -moz-opacity: 0; opacity: 0; filter:alpha(opacity=0);
  55. animation-name:ofirmie-text; animation-duration:1s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:500ms;
  56. -webkit-animation-name:ofirmie-text; -webkit-animation-duration:1s; -webkit-animation-iteration-count:1; -webkit-animation-fill-mode:forwards; -webkit-animation-delay:500ms;
  57. -moz-animation-name:ofirmie-text; -moz-animation-duration:1s; -moz-animation-iteration-count:1; -moz-animation-fill-mode:forwards; -moz-animation-delay:500ms;
  58. -o-animation-name:ofirmie-text; -o-animation-duration:1s; -o-animation-iteration-count:1; -o-animation-fill-mode:forwards; -o-animation-delay:500ms;
  59. }
  60. @keyframes ofirmie-text {
  61. 0% { -moz-opacity: 0; opacity: 0; filter:alpha(opacity=0); }
  62. 100% { -moz-opacity: 1; opacity: 1; filter:alpha(opacity=100); }
  63. }
  64. @-webkit-keyframes ofirmie-text {
  65. 0% { -moz-opacity: 0; opacity: 0; filter:alpha(opacity=0); }
  66. 100% { -moz-opacity: 1; opacity: 1; filter:alpha(opacity=100); }
  67. }
  68. @-moz-keyframes ofirmie-text {
  69. 0% { -moz-opacity: 0; opacity: 0; filter:alpha(opacity=0); }
  70. 100% { -moz-opacity: 1; opacity: 1; filter:alpha(opacity=100); }
  71. }
  72. @-o-keyframes ofirmie-text {
  73. 0% { -moz-opacity: 0; opacity: 0; filter:alpha(opacity=0); }
  74. 100% { -moz-opacity: 1; opacity: 1; filter:alpha(opacity=100); }
  75. }
  76. #content #ofirmie-text p { margin: 20px; text-align: justify; font-size: 1.2em; }


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/
mskiba
Wersja
12.16

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

Ale dzieki za cenne info 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/]
mskiba
  1. Informacje o wersji
  2. Wersja
  3. 12.16
  4. Kompilacja
  5. 1860
  6. Platforma
  7. Linux
  8. System
  9. i686, 3.5.1-1.fc17.i686.PAE
  10. Identyfikacja przeglądarki
  11.  
  12. Opera/9.80 (X11; Linux i686) Presto/2.12.388 Version/12.16


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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.