动画从顶部向下滑动 [英] Animation slide down from top

问题描述

你会如何做这样的动画。
新元素应该以其完整高度从不可见区域滑动到可见区域。

解决方案

我知道这是问jQuery，但如果你不知道这可以使用CSS也是如此，所以我考虑张贴一个CSS答案，如果你不想要一个CSS解决方案，你可以忽略这个帖子。

从头开始，我使用CSS3 @keyframes 动画，并使用 animation-delay 来控制每个元素，rest是自我解释..

是的，我也使用 animation-fill-mode：forward; 您 div 的位置不会重置。

演示 （请使用Firefox检查演示，如果您要支持Chrome浏览器和其他浏览器，可以直接添加专有属性以支持

 < div class =wrap> 
< div class =block_1> Hello< / div> 
< div class =block_2> Hello< / div> 
< div class =block_3> Hello< / div> 
< / div> 
  

CSS

  .wrap {
 height：200px; 
 width：300px; 
 overflow-y：hidden; 
 position：relative; 
} 
 
 .wrap> div {
 height：20px; 
 width：280px; 
 margin：auto; 
 background：＃f5f5f5; 
 position：absolute; 
 top：-100px; 
} 
 
 .wrap> div.block_1 {
 animation-name：block1; 
 animation-duration：1s; 
 animation-fill-mode：forward; 
} 
 
 .wrap> div.block_2 {
 animation-name：block2; 
 animation-duration：1s; 
 animation-fill-mode：forward; 
 animation-delay：3s; 
} 
 
 .wrap> div.block_3 {
 animation-name：block3; 
 animation-duration：1s; 
 animation-fill-mode：forward; 
 animation-delay：5s; 
} 
 
 @keyframes block1 {
 0％{
 top：-100px; 
} 
 100％{
 top：0; 
} 
} 
 
 @keyframes block2 {
 0％{
 top：-100px; 
} 
 100％{
 top：40px; 
} 
} 
 
 @keyframes block3 {
 0％{
 top：-100px; 
} 
 100％{
 top：80px; 
} 
} 
  

How would you do an animation like this. The new element should slide with its full height from the invisible area to the visible area.

解决方案

Am aware that this was asked for jQuery but if you are not aware that this can be done with CSS as well, so I considered posting a CSS answer, if you don't want a CSS solution, you can simply ignore this post.

I've made this from scratch, am using CSS3 @keyframes animation, and am using animation-delay to control the fall of each element, rest is self explanatory..

Yea, am also using animation-fill-mode: forwards; so that you div positions don't reset.

Demo (Please use Firefox to check the demo, if you want to support Chrome and other browsers, you can simply add proprietary properties to support them)

HTML

<div class="wrap">
    <div class="block_1">Hello</div>
    <div class="block_2">Hello</div>
    <div class="block_3">Hello</div>
</div>

CSS

.wrap {
    height: 200px;
    width: 300px;
    overflow-y: hidden;
    position: relative;
}

.wrap > div {
    height: 20px;
    width: 280px;
    margin: auto;
    background: #f5f5f5;
    position: absolute;
    top: -100px;
}

.wrap > div.block_1 {
    animation-name: block1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.wrap > div.block_2 {
    animation-name: block2;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}

.wrap > div.block_3 {
    animation-name: block3;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 5s;
}

@keyframes block1 {
    0% {
        top: -100px;
    }
    100% {
        top: 0;
    }
}

@keyframes block2 {
    0% {
        top: -100px;
    }
    100% {
        top: 40px;
    }
}

@keyframes block3 {
    0% {
        top: -100px;
    }
    100% {
        top: 80px;
    }
}

这篇关于动画从顶部向下滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！