position:fixed 搞乱关键帧动画

Question

在我的网站上，关键帧动画应该将图像染成蓝色。但是属性的 position:fixed 使这个非常相同的图像响应似乎与关键帧混淆。

如果我删除 position:fixed，则会出现蓝色过渡。但是当我把它放回去时，色调过渡是白色而不是蓝色。

有没有办法让这两个属性一起工作？

代码如下：

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="hover-min.css" />
    <link rel="stylesheet" href="main.css" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script type="application/javascript" src="dist/js/jquery-2.1.4.min.js"></script>       
    <script type="application/javascript" src="dist/js/bootstrap.min.js"></script>
    <script src="script/jquery.js" type="text/javascript"></script>
    <script src="background.js" type="text/javascript"></script>
 </head>

<body>
    <div id="opacity"> <!-- DIV containing the image supposed to turn blue -->
        <img src="http://www.nexusyouthsummit.org/wp-content/uploads/2013/09/nyc-fisheye-20121.jpg" alt="" class="nyc" />
    </div>      
</body>
</html>

/* CSS */
img.nyc {
    *position:fixed; /* property messing with the blue tint transition, rendering it white unless I remove it */
    top:0;
    left:0;
    z-index:-1;
}

#opacity {
    background-color: #428BCA;
    display:inline-block;
}
#opacity img {
    height : 300px;
    opacity: 0.5;
    -webkit-animation: animation 2s linear;
    -moz-animation: animation 2s linear;
    -ms-animation: animation 2s linear;
    -o-animation: animation 2s linear;
    animation: animation 2s linear;
}

@-webkit-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
@-moz-keyframes animation{
    from{
        opacity: 5;
    }
    to{
        opacity: 0.5;
    }
}
@-ms-keyframes animation{
    from{
        opacity: 5;
    }
    to{
        opacity: 0.5;
    }
}
@-o-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
@keyframes animation{
    from{
        opacity: 5;
    }
    to{
        opacity: 0.5;
    }
}

Answer 1

"#opacity" 不知道在您将其子项设置为 position:absolute 或 position:fixed 后它应该变成多大。如果你设置

#opacity {
    height : 300px;
    width: 660px;
    position: fixed;
    background-color: #428BCA;
    display:inline-block;
}

它将再次起作用。

您可能需要一些 js 代码来将父项裁剪为其最大的子项。()

Answer 2

将固定位置移动到#opacity:

#opacity {
  position: fixed;
}

position:fixed 搞乱关键帧动画

position:fixed messing with keyframes animation

css

animation

position

fixed