Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Problemy z css pod operą
mskiba
post 4.01.2014, 10:44:11
Post #1





Grupa: Zarejestrowani
Postów: 69
Pomógł: 0
Dołączył: 28.04.2013

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 18.06.2025 - 02:53