Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > Web Development
Keyframes in FF aber nich in Chrome Keyframes in FF aber nich in Chrome
You last visited: Today at 18:21

  • Please register to post and access all features, it's quick, easy and FREE!

Advertisement


Advertise with us!

Keyframes in FF aber nich in Chrome

Discussion on Keyframes in FF aber nich in Chrome within the Web Development forum part of the Coders Den category.

Reply
 
Old   #1
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Dec 2012
Posts: 100
Received Thanks: 9
Keyframes in FF aber nich in Chrome

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:
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>
CSS:
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; }
}
Fusselchön is offline  
Old 04/11/2013, 11:27   #2

 
マルコ's Avatar
 
elite*gold: 1329
The Black Market: 8/0/0
Join Date: Jun 2009
Posts: 1,873
Received Thanks: 960
Benutzt du die neusten Versionen der Browser? Ältere Versionen könnten dieses CSS3 Feature noch nicht (vollständig) implementiert haben.
マルコ is offline  
Old 04/11/2013, 11:43   #3
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Dec 2012
Posts: 100
Received Thanks: 9
Google Chrome ist auf dem neuesten Stand.

*** habe ich =)
Fusselchön is offline  
Old 04/11/2013, 13:17   #4

 
Synatex's Avatar
 
elite*gold: 25
The Black Market: 14/0/0
Join Date: Apr 2010
Posts: 1,019
Received Thanks: 331
Probiers mal mit dem Engine-Präfix: @-webkit-keyframes
Synatex is offline  
Old 04/11/2013, 13:45   #5
 
CracyCrazz's Avatar
 
elite*gold: 8
The Black Market: 27/0/0
Join Date: Jul 2010
Posts: 1,085
Received Thanks: 126
Wie Synatex bereits erwähnte, nutz die Präfixes.


HTML Code:
@-webkit-keyframes show {
	0%{opacity: 0; z-index:1; display: none;}
    25%{opacity: 0.25; z-index: 1; display: block;}
    50%{opacity: 0.5; z-index: 1; display: block;}
    75%{opacity: 0.75; z-index: 1; display: block;}
	100%{ opacity: 1; z-index:2; display: block;}
}
@-moz-keyframes show {
	0% {  opacity: 0; z-index:1; display: none;}
    25%{opacity: 0.25; z-index: 1; display: block;}
    50%{opacity: 0.5; z-index: 1; display: block;}
    75%{opacity: 0.75; z-index: 1; display: block;}	
	100%{ opacity: 1; z-index:2; display: block;}
}
@-o-keyframes show {
	0% {  opacity: 0; z-index:1; display: none;}	
    25%{opacity: 0.25; z-index: 1; display: block;}
    50%{opacity: 0.5; z-index: 1; display: block;}
    75%{opacity: 0.75; z-index: 1; display: block;}	
	100%{ opacity: 1; z-index:2; display: block;}
}
@keyframes show {
	0% {  opacity: 0; z-index:1; display: none;}	
    25%{opacity: 0.25; z-index: 1; display: block;}
    50%{opacity: 0.5; z-index: 1; display: block;}
    75%{opacity: 0.75; z-index: 1; display: block;}	
	100%{ opacity: 1; z-index:2; display: block;}
}
Das Beispiel nutz ich derzeit für ne Slideshow und funktioniert in allen aktuellen, bekannten modernen Browsern.
CracyCrazz is offline  
Thanks
1 User
Old 04/11/2013, 13:50   #6
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Dec 2012
Posts: 100
Received Thanks: 9
Code:
@-webkit-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); }
}
@-moz-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); }
}
@-o-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 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); }
}


@-webkit-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; }
}
@-moz-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; }
}
@-o-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; }
}
@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; }
}
Sieht jetz so aus, geht aber trotzdem nicht :/
Fusselchön is offline  
Old 04/11/2013, 14:33   #7
 
CracyCrazz's Avatar
 
elite*gold: 8
The Black Market: 27/0/0
Join Date: Jul 2010
Posts: 1,085
Received Thanks: 126
Oh, ich hab vergessen zu erwähnen das du dann noch,

Code:
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
Die jeweiligen Präfixes für die jeweiligen Browser in der Animation angeben musst, genauso wie du beim animation-name auch den Namen eingeben musst.

Code:
.hide {
	-webkit-animation-name: hide;
	-moz-animation-name: hide;
	-o-animation-name: hide;
	animation-name: hide;
    display: none;
}
Beides auszüge aus einer meiner CSS Dateien.
CracyCrazz is offline  
Thanks
1 User
Old 04/11/2013, 14:47   #8
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Dec 2012
Posts: 100
Received Thanks: 9
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 {
  -webkit-animation-name: hideMe 1s;
   -moz-animation-name: showMe 1s;
	  -o-animation-name: showMe 1s;
	    animation-name: showMe 1s;
		
-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
#portfolio li:hover .back {
  -webkit-animation-name: showMe 1s;
    -moz-animation-name: showMe 1s;
	  -o-animation-name: showMe 1s;
	    animation-name: showMe 1s;
		
-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}


@-webkit-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); }
}
@-moz-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); }
}
@-o-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 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); }
}


@-webkit-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; }
}
@-moz-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; }
}
@-o-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; }
}
@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; }
}
Hab das ganze jetz so interpretiert.
Geht aber immer noch nicht, leider.
Aber danke schonmal für eure mühen.
Fusselchön is offline  
Old 04/11/2013, 14:59   #9
 
CracyCrazz's Avatar
 
elite*gold: 8
The Black Market: 27/0/0
Join Date: Jul 2010
Posts: 1,085
Received Thanks: 126
So wie du es interpretiert hast ist es falsch.

Du gibst beim "animation-name" eine Dauer von 1 Sekunde an. Dafür gibts "animation-duration: 1s;" mit den jeweiligen Präfixes davor. Des weiteren würde ich für die die animation-fill-mode Dinge ect. ne Klasse anlegen und die dann einfach zuweisen.

Ich geb dir jetzt einfach mal nen zu dem kompletten Ausschnitt der CSS Datei, vllt. verstehst du es dann etwas besser.
CracyCrazz is offline  
Thanks
1 User
Old 04/11/2013, 15:08   #10
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Dec 2012
Posts: 100
Received Thanks: 9
Danke dir, hat geklappt =)
Fusselchön is offline  
Reply

« PHP 4.5 CSS einfügen | Suche Autoren für 'Wissensdatenbank' »

Similar Threads Similar Threads
adobe flash player 11.4 geht nich für google chrome?
09/04/2012 - DarkOrbit - 12 Replies
PROBLEM HAT SICH GEKLÄRT DER THREAD KANN GESCHLOSSEN WERDEN PROBLEME HAS GONE XD THE THREAD CAN BE CLOSED SRY FÜR DIE GROSE SCHRIFT...
Google Chrome Suchmaschine ändern....Aber wie
10/01/2011 - Off Topic - 9 Replies
Ja ich will nur das Google Chrome Google als Suchmaschine benutzt nicht Yahoo aber wie?
Ich Will nich Spammen aber...
07/15/2011 - S4 League Hacks, Bots, Cheats & Exploits - 1 Replies
Ich hab e heute schon 3 mit Godmode gesehen finde aber keine wenn jemand hatt bitte schikt mir im Tread link ich liebe Godmode
GM hilft nich, aber IHR .. (:
07/22/2009 - Metin2 Private Server - 6 Replies
hey, ich habe ein mächtiges problem. ich hab mich am lagerverwalter(longjuyt2 server2) ausgeloggt um mich mir nem andren char einzuloggen und bonis zu ändern (um die wartezeit zu verkürzen) bin mit diesem 2 char reingekommen, aber mit dem ersten nicht . ich habe mir einen 3 char gemacht , der rein kommt. habe es mit meinem ersten char versucht - nichts . und wieder undwieder = nichts . GM schreibt mir nicht zurück . kann mir jemand von hier helfen :'(



All times are GMT +1. The time now is 18:21.

elitepvpers - play less, get more - Top

Powered by vBulletin®
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2025 elitepvpers All Rights Reserved.