Hi, ich hab ein Problem, meine Keyframeanimation wird im FF angezeigt, aber im Chrome geht sie gar nicht. Im IE geht sie nur halb (Das Laden am Anfang geht, danach nichtsmehr)
Hier der Code:
HTML:
CSS:
Hier der Code:
HTML:
Code:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul id="portfolio">
<li>
<div class="card"></div>
<img src="http://lorempixel.com/300/200/people" alt="pic" />
<div class="back">
<h2>Johan van Tongeren</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
</div>
</li>
<li>
<div class="card"></div>
<img src="http://lorempixel.com/300/200/abstract" alt="pic" />
<div class="back">
<h2>Johan van Tongeren</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
</div>
</li>
<li>
<div class="card"></div>
<img src="http://lorempixel.com/300/200/technics/" alt="pic" />
<div class="back">
<h2>Johan van Tongeren</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
</div>
</li>
</ul>
</body>
</html>
Code:
body {
background-color: lightblue;
background-image: linear-gradient(top, rgba(255,255,255,.6) 0%, transparent 100%);
background-repeat: no-repeat;
padding: 50px;
}
a { color: hotpink; }
#portfolio {
list-style: none;
margin: 0;
padding: 0;
width: 1060px;
}
#portfolio li {
display: inline-block;
margin-right:30px;
position: relative;
perspective: 600px;
width: 320px;
height: 220px;
}
#portfolio li img,
#portfolio li .back {
position: absolute;
left: 10px;
top: 10px;
}
#portfolio .card {
background: rgba(255,255,255,.7);
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #999;
border-radius: 3px;
z-index: 2;
position: absolute;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#portfolio li img {
z-index: 3;
animation: showMe 1s;
}
#portfolio li .back {
width: 300px;
height: 200px;
overflow: hidden;
z-index: 2;
animation: hideMe 1s;
text-shadow: 0 1px #FFF;
}
#portfolio h2 {
margin: 0 0 .5em 0;
padding-bottom: .5em;
border-bottom: 1px solid #999;
}
#portfolio li:hover img {
animation: hideMe 1s;
animation-fill-mode: forwards;
}
#portfolio li:hover .back {
animation: showMe 1s;
animation-fill-mode: forwards;
}
@keyframes hideMe {
0% { transform: translateY(0px); z-index 3; }
49% { z-index: 3; -webkit-filter: blur(3px); }
50% { transform: translateY(230px) rotateX(20deg); z-index: 2; }
51% { z-index: 1; -webkit-filter: blur(3px) grayscale(0);}
100% { transform: translateY(0px); z-index: 1;-webkit-filter: blur(4px) grayscale(1); }
}
@keyframes showMe {
0% { transform: translateY(0px); z-index: 1;-webkit-filter: blur(3px) grayscale(1); }
49% { z-index: 1; }
50% { transform: translateY(-230px) rotateX(-20deg); z-index: 2; }
51% { z-index: 3; -webkit-filter: blur(3px) grayscale(0);}
100% { transform: translateY(0px); z-index: 3; }
}