Comment #2 on issue 62660 by k...@chromium.org: CSS transitions get applied
upon page load when @media queries are present
http://code.google.com/p/chromium/issues/detail?id=62660
Confirmed that http://playground.deaxon.com/css/animated-responsive-layout
performs the transition on load when the window is thin enough on
13.0.767.1 dev.
I'm also seeing this issue when I don't have media queries.
I have a block that slides to the right on hover, but on page load it
transitions to the left and up into it's initial position. I'm only seeing
this on chrome.
css:
#resources ul {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* ie8 */
filter: alpha(opacity=0); /* ie5-7 */
opacity: 0; /* real browsers */
left: 20px;
width: 240px;
height: 250px;
position: relative;
margin-top: -250px;
z-index: 99;
-webkit-transition: all .3s ease-in-out .3s;
-moz-transition: all .3s ease-in-out .3s;
-o-transition: all .3s ease-in-out .3s;
transition: all .3s ease-in-out .3s;
background-color: rgb(226,117,52);
}
#resources:hover ul {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* ie8
*/
filter: alpha(opacity=90); /* ie5-7 */
opacity: 0.9; /* real browsers */
left: 279px;
top: 0;
}
adding the display:none/block to the css resolves the issue, but then the
transition does not work.