На моем веб-сайте анимация ключевых кадров должна окрашивать изображение в синий цвет. Но position:fixed свойства, делающего это же самое изображение отзывчивым, похоже, путается с ключевыми кадрами.
Если я удалю position:fixed, произойдет переход синего оттенка. Но когда я кладу его обратно, переход оттенка становится белым, а не синим.
Для codepen: нажмите здесь
Есть ли способ заставить оба этих свойства работать вместе?
Вот код:
<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;
}
}
