• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] CSS3 "animation" & "keyframes"

Mutschas

Neues Mitglied
Hallo zusammen,

ich mache heute zum ersten Mal was größeres mit CSS3 und bin schon auf ein Problem gestoßen. Ich möchte erstmal zum Test eine Box von oben nach unten bewegen. Leider funktioniert das bei mir weder im Firefox, noch im IE 10.

Wo ist der Fehler?

HTML:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style>

#box {
    border: 1px solid #999;
    width: 350px;
    height: 100px;
    background: #ccc;
    text-align: center;
    border-radius:25px;    
    box-shadow: 10px 10px 5px #888888;
    animation:mytest 5s;
}

@keyframes mytest
{
    from    {top:0px;}
    to    {top:500px;}
}
</style>
</head>
<body>
            <div id="box">Test</div>
</body>
</html>

Danke.
 
Werbung:
Du versuchst die top-Eigenschaft zu ändern. Das wirkt aber nur bei nicht-static positionierten Elementen, deines ist static-positioniert.
 
Vielen Dank!

Jetzt noch eine Frage. Ich möchte, dass die Box von oben nach unten fährt, so wie jetzt und dann soll sie aber unten stehen bleiben. Kannst du mir hier einen Rat sagen?

//Edit
Hab es. Das hat gefehlt:
animation-fill-mode: forwards;
 
Zuletzt bearbeitet:
Werbung:
hallo,
Hab ein Problem mit meinem css code. Ich habe mit animation & keyframes eine diashow im hintergrund der website.
Meine Website: http://aqua-wirbellose.de/

Nun funktioniert das nur in google chrome. Internet exploere, firefox, opera streiken da.

weiß net weiter

mein css CODE:

Code:
body
{
  position:absolute;
  background:url(home.JPG);
  left:0px;
  top:0px;
  background-size:100% 100%;
  background-repeat:no-repeat;
  animation:dia;
  animation-duration:20s;
  animation-delay:5s;
  animation-interation-count:infinite;
  animation-play-state:running;
  -webkit-animation:dia;
  -webkit-animation-duration:35s;
  -webkit-animation-delay:10s;
  -webkit-animation-iteration-count: infinite; 
}
   
@keyframes dia
{
  0%    {position:absolute; background:url(home.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  14%  {position:absolute; background:url(home2.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  28%  {position:absolute; background:url(home3.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  42%  {position:absolute; background:url(home4.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  56%  {position:absolute; background:url(home5.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  70%  {position:absolute; background:url(home6.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  84%  {position:absolute; background:url(home7.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  98%  {position:absolute; background:url(home.JPG); background-size:100% 100%; background-repeat:no-repeat;}
}
   
@-webkit-keyframes dia
{
  0%    {position:absolute; background:url(home.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  14%  {position:absolute; background:url(home2.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  28%  {position:absolute; background:url(home3.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  42%  {position:absolute; background:url(home4.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  56%  {position:absolute; background:url(home5.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  70%  {position:absolute; background:url(home6.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  84%  {position:absolute; background:url(home7.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  98%  {position:absolute; background:url(home.JPG); background-size:100% 100%; background-repeat:no-repeat;}
}

Währ schön wenn jemand eine lösung hat

Lunge
 
Zurück
Oben