Utiliser CSS3 Animation pour déplacer div du haut vers le bas de l'écran?

Je vais essayer d'obtenir un div à développer à partir du haut de la page vers le bas. Lorsque l'animation commence la div sera caché (hauteur 0%), jusqu'à ce qu'il remplisse la page à 100%. J'ai essayé de faire comme si, mais aucune ne semble être au travail:

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>About Me</title>

    <link rel="stylesheet" href="stylesheets/main.css">
</head>

<body>
    <div id="bar"></div>
</body>
</html>

CSS:

    *
{
    box-sizing: border-box;
}

body
{
    height: auto;
    width: auto;
    direction: ltr;
    z-index: 1;
    background-color: #fff;
}

#bar
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 5%;
    background-color: #3b5598;
    display: block;
    -webkit-animation: bar 7s ease;
}

@keyframes bar
{
  0% {
    top: 0%;
  }
  100% {
    top: 100%;;
  }
}

J'ai eu des animations de travail avant de gauche à droite, mais rien venant du haut vers le bas. J'ai largement de google de cette, mais en vain. Grâce

  • L'animation de la top propriété traduire l'élément, si vous le souhaitez, développer, animer la height ou bottom de la propriété. Aussi, les images clés sont vraiment pour des animations plus complexes, lorsqu'on passe d'un état à un autre, vous pouvez utiliser un transition et il aura une meilleure prise en charge du navigateur.
  • Assez rapide à faire avec jQuery: $("#bar").animate({"height":"500px"}, 3000); Référence: api.jquery.com/animate
InformationsquelleAutor Joshua | 2013-10-02
  1. 4

    Vous pouvez essayer quelque chose comme ce qui suit:

    .container{
    background:lightblue;
    height:1000px;
    -webkit-animation: expand 5s;
}

@-webkit-keyframes expand{
    0%{height:0px}
    100%{height:1000px}
}

    http://jsfiddle.net/J7Aw7/

    InformationsquelleAutor Conqueror
  2. 1

    Le titre de cette question ("Déplacer Div') et à la demande de l'OP ('développer une div') sont un peu hors de synchronisation. Depuis ce DONC, la question est renvoyée par Google lors de la recherche pour animer un div, je pensais à un lien post de blog qui explique comment passer d'une div sur le css 'top' de la propriété.

    Ici est la violon de l'article du blog. Appliquer quelque chose de semblable à la suivante css de votre div

    #bar{
  position: absolute;
  top:0px;
  transition: 2s;
}

    et l'utilisation onload, hover, ou une autre méthode pour appliquer une valeur supérieure à transition à.

    #bar:hover{
  top:100px;
}
    InformationsquelleAutor Jon
  3. 0

    Modifier le css de la barre:

     #bar {
 position: absolute; 
 top: 0px; 
 left: 0px; 
 width: 5%; 
 background-color: #3b5598; 
 display: block; 
 -webkit-animation: all 7s ease; 
 }

    Ensuite, javacript de variation supérieur à 100% et de la marge-top - hauteur (que vous aurez à définir)

    Cela devrait déplacer la barre du haut vers le bas joliment

    InformationsquelleAutor user2751288