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.
#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; }
Z góry dziękuję za pomocne sugestie.