Keyframes: geht nur mit width

G

gd0123456

Mitglied
HI Leute, ich möchte gerne eine Animation machen in dem zum Beispiel die Seite von der höhe her kleiner wird.
Aber dies funktioniert nicht. sobald die Animation gestartet wird kommt der graue Bildschirm. So als würde sie nicht gestartet werden, die Seite verschwindet. Genauso kann ich es nicht top oder left oder right verändern. Nur mit width.

Mache ich es jedoch mit width und lass die Breite kleiner werden funktioniert dies einwandrei.

Vl. kann mir einer helfen.

HTML Code:

Code: 
<div id = "portfolio">

 <div id = "mitte">

 <div id = "portfoliodiv">
 <!-- Bildreihen -->
 
 </div> <!-- Ende DIV Portfoliodiv -->
 <!-- Hintergrundbild Unten an der Leiste -->
 <div id = "hintergrundbox" style = "z-index:0; bottom:0; border-color: red; border-width: 0px; border-style: solid; min-height: 20%; height: 20%; height: auto; position: absolute; margin-top: 51%; width: 100%;">
 <div style="z-index: 0; position: absolute; min-height: 100%; height: 100%; height: auto; border-color: blue; border-width: 0px; border-style: solid; background-image: url('./images/grafik-bw.png'); background-repeat: no-repeat; background-size:100% 91%; width: 100%;">

 </div>
 </div>
 </div> <!-- Ende DIV Mitte --> 
 <!-- Ende Leiste Unten -->
</div><!-- Ende DIV Portfolio -->

Css:
Code: 
#portfolio {
 width: 0%;
 height: 100%;
 min-height: 100%;
 height: auto;
 position: absolute;
 background-color: #ECECEC;
}

#mitte {
 left: 25%;
 width: 50%;
 min-height:100%;
 height: auto;
 height: 100%;
 position: absolute;
 background-color: White;
 overflow: hidden;
}

#portfoliodiv {
 width: 100%;
 height: 70%;
 height: auto;
 min-height: 70%;
 border-width: 0px;
 border-color: green;
 border-style: solid;
 text-align: center;
 position: absolute; 
 white-space: nowrap;
 overflow: hidden;
}
 
Es soll so funktionieren wie hier.

Code: 
<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: yellow;
  position :absolute;
  -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
  animation: mymove 5s infinite;
}


/* Standard syntax */
@keyframes mymove {
  0%  {top: 0%;}
  25%  {top: 20%;}
  75%  {top: 50%;}
  100% {top: 100%;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>
 
Ja das funktioniert schon mal gut, nur verschwindet bei mir das Div und ich sehe nur den grauen Hintergrund. und gibt es auch eine Möglichkeit es mit height zu machen sowie mit dem width?
 
gd0123456 hat gesagt.:
Ja das funktioniert schon mal gut, nur verschwindet bei mir das Div
Zum Vergrößern anklicken....
Liegt in der Natur der Sache, wenn top mit zunehmenden Werten animiert, und das Element somit im Viewport stückweise nach unten versetzt wird ;)
gd0123456 hat gesagt.:
und ich sehe nur den grauen Hintergrund
Zum Vergrößern anklicken....
...weil es den inneren DIV-Blöcken derzeit an Inhalt mangelt.

D'rum hatte ich auch "portfolio" reingesetzt, damit zumindest der graue Hintergrund zum Vorschein kommt :D
gd0123456 hat gesagt.:
und gibt es auch eine Möglichkeit es mit height zu machen sowie mit dem width?
Zum Vergrößern anklicken....
height animiert: http://jsfiddle.net/spicelab/5jjzgtjt/

Dass sich @keyframes grundsätzlich auf die genannten/gezeigten Eigenschaften anwenden lassen, belegen meine beiden jsfiddle-Demos.

Wie die Animationen auf den Betrachter wirken, steht auf einem anderen Blatt.
 
Zuletzt bearbeitet:
Ich wende das mit height auf das äußerste Div an, also auf Portfolio, das einzige was passiert ist dass es quasi einfach verschwindert, unabhängig welche zeit ich einstelle.

Hab jetzt wirklich aus mal ausgeblendet bzw. rausgenommen wo es ein Problem geben könnte, aber bei mir verschwindet die seite einfach nur und dann kommt die andere seite. aber den hight Effekt oder top Effekt bekomme ich nicht hin.

Inhalte sind vorhanden ich hab alles nur wegen der Übersicht rausgenommen. Sonst wäre der Code schwer lesbar gewesen
 
Zuletzt bearbeitet:
gd0123456 hat gesagt.:
Ich wende das mit height auf das äußerste Div an, also auf Portfolio, das einzige was passiert ist dass es quasi einfach verschwindert, unabhängig welche zeit ich einstelle.

Hab jetzt wirklich aus mal ausgeblendet bzw. rausgenommen wo es ein Problem geben könnte, aber bei mir verschwindet die seite einfach nur und dann kommt die andere seite. aber den hight Effekt oder top Effekt bekomme ich nicht hin.
Zum Vergrößern anklicken....
Ist das Ganze online verfügbar, um einen Blick darauf werfen zu können?

Andernfalls bitte auf http://jsfiddle.net demonstrieren.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück