login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Animaties werken wel in Safari/Chrome. Maar niet in IE en FF

Offline DaanDanoon - 18/07/2013 15:47
Avatar van DaanDanoonLid Hey,

Ik verwacht dat ik hier een dom klein foutje over het hoofd zie. Maar ik heb een css3 slidertje gemaakt, wat prima werkt in Safari en Chrome (webkit). Maar in niet-webkit browsers, bijvoorbeeld IE en FF Doet hij het niet. Er verschijnt gewoon een lege plek.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #slider
  2. {
  3. width:669px;
  4. height:385px;
  5. animation: slider 20s;
  6. animation-iteration-count:infinite;
  7. -webkit-animation:slider 20s; /* Safari and Chrome */
  8. -webkit-animation-iteration-count:infinite;
  9. float: right;
  10. margin-right: 50px;
  11. }
  12.  
  13. @keyframes slider
  14. {
  15. 0%   {background-image: url("slider2.png");}
  16. 5%   {background-image: url("slider1.png");}
  17. 25%  {background-image: url("slider1.png");}
  18. 30%  {background-image: url("slider2.png");}
  19. 50%  {background-image: url("slider2.png");}
  20. 55%  {background-image: url("slider1.png");}
  21. 75%  {background-image: url("slider1.png");}
  22. 80%  {background-image: url("slider2.png");}
  23. 100% {background-image: url("slider2.png");}
  24. }
  25.  
  26. @-webkit-keyframes slider /* Safari and Chrome */
  27. {
  28. 0%   {background-image: url("slider2.png");}
  29. 5%   {background-image: url("slider1.png");}
  30. 25%  {background-image: url("slider1.png");}
  31. 30%  {background-image: url("slider2.png");}
  32. 50%  {background-image: url("slider2.png");}
  33. 55%  {background-image: url("slider1.png");}
  34. 75%  {background-image: url("slider1.png");}
  35. 80%  {background-image: url("slider2.png");}
  36. 100% {background-image: url("slider2.png");}
  37. }


Heeft iemand een idee wat ik fout doe? Alvast bedankt

4 antwoorden

Gesponsorde links
Offline Joel - 19/07/2013 08:29
Avatar van Joel Eigenaar Die webkit properties ga je enkel kunnen gebruiken in Chrome en Safari geloof ik.

zie: http://www.w3sc...upport.asp
Offline DaanDanoon - 20/07/2013 11:37
Avatar van DaanDanoon Lid Dat weet ik, daarom heb ik ook een niet webkit versie in dit scriptje staan, die is precies hetzelfde als de webkit versie, maar dan zonder webkit commando erin. Dan moet het toch ook werken voor de andere browsers? Vanaf IE 10 worden @keyframe en animation ondersteund
Offline WouterJ - 21/07/2013 09:47
Avatar van WouterJ HTML gevorderde CSS Animaties zijn bijna overal in de beta modes. Gebruik dus alle benodigde prefixes:
-moz- voor FireFox (gemaakt door Mozilla)
-webkit- voor Chrome, FireFox en Opera 15+ (draaien allemaal op de webkit engine, chrome vanaf 26 draait op een fork, blink,maar gebruikt nog steeds deze prefix)
-o- voor Opera 15-
-ms- voor IE (gemaakt door MicroSoft)

En vergeet nooit om de officiële versie, zonder prefix te gebruiken.
Offline DaanDanoon - 23/07/2013 18:34
Avatar van DaanDanoon Lid Ik heb alle prefixes erbij gezet, maar nog steeds geen resultaat
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.185s