js will mit keyframes translate nicht funktionieren

rernanded

Erfahrenes Mitglied
Hi
habe das Problem das ich mit js ein div (#zweite) anzeigen lassen will das in den css auf display: none; eingestellt ist.
Alles funktioniert wenn ich in den css display: yes; einstelle - das div ist sichtbar. Nur sobald ich versuche dies mittels js sichtbar zu machen klappts nicht mehr.

MONI

Hier js im head:
HTML:
...
<script>
function showzweite() {
  document.getElementById('zweite').style.display = "yes";
}
</script>
</head>
<body>
<input type="button" name="" id="" value="zweite" onclick="showzweite();" /><br />
<div id="zweite">
           ...blablabla
</div>
...


Hier css:
HTML:
#zweite {

display: none;

   width: 100%;
   height: 60%;
   background: url('images/zweites.jpg') no-repeat top center;
   background-size: 100%;
   position: absolute;
   top: 0%;
   left: 0%;
   opacity: 1.0;
   z-index: 100;
animation: movingzweite 3s;   
}

@keyframes movingzweite {
  100% {
  transform: translate(0px, 0px);
  }
  0% {
  transform: translate(0px, 600px);
  }
}
 

Neue Beiträge

Zurück