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.
#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.