Вы можете постепенно изменять высоту div, используя CSS-анимацию или переходы, чтобы создать иллюзию, что он постепенно появляется вверх. Я создал чистый пример CSS, но это можно сделать и с помощью JavaScript и / или полотен. Чтобы сэкономить время, я использовал серый div в качестве «клубка дыма», но вы можете изменить его на анимированный фон или что-то еще, в зависимости от ваших потребностей.
.smoke {
position: absolute;
width: 240px;
height: 140px;
opacity: 0;
/* You will probably want to use a animated gif as the background instead of a gradient */
background: radial-gradient(circle, darkgrey, white);
border-radius: 50px;
animation-name: smoke;
animation-duration: 5s;
}
.element-to-appear {
width: 200px;
height: 100px;
margin: 20px;
position: relative;
background-color: lightblue;
overflow: hidden;
animation-name: appear;
animation-duration: 2s;
}
@keyframes appear {
0% {
height: 0px;
top: 100px;
}
100% {
height: 100px;
top: 0px;
}
}
@keyframes smoke {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<!DOCTYPE html>
<html>
<body>
<div class="element-to-appear">
Lorem ipsum dolor sit amet, vero ornatus commune mea et, sale facer graeco ex vim. Ut nonumes mediocritatem est, soluta instructior no eos. Ad quo quaestio principes. Dolorem dissentiet his ad.
</div>
<div class="smoke">
</div>
</body>
</html>
Если вы хотите, чтобы div исчезал асимметрично, вы можете создать маску и сдвинуть ее так:
#fade-in {
background-color: lightblue;
width:300px;
left: 0px;
}
#mask {
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
animation-name: mask-anim;
animation-duration: 4s;
width:600px;
left: -600px;
}
#mask, #fade-in {
position: absolute;
top: 0px;
height: 200px
}
@keyframes mask-anim {
0% {
left: 0px;
}
100% {
left: -600px;
}
}
<div id="fade-in">
Lorem ipsum dolor sit amet, cu liberavisse interpretaris mel, qui te nonumes suavitate mediocritatem, vel no commodo appellantur. Alii putant audiam te per, ius et rebum porro. Ad voluptatum incorrupte quo, viris denique eum no. Id esse dicant partiendo ius, sed doctus placerat ut. In quo fugit epicuri ponderum, et eos oblique labitur.
</div>
<div id="mask"></div>