# Weweb fade out animation with keyframes

**URL:** <https://community.weweb.io/t/weweb-fade-out-animation-with-keyframes/14546>\
**Category:** Ask us anything\
**Created:** [November 15, 2024, 9:53am UTC](https://community.weweb.io/t/weweb-fade-out-animation-with-keyframes/14546 "2024-11-15T09:53:42Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![liam\_putra](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/liam_putra/32/1057_2.png) [@liam\_putra](https://community.weweb.io/u/liam_putra)\
**Post date:** [November 15, 2024, 9:53am UTC](https://community.weweb.io/t/weweb-fade-out-animation-with-keyframes/14546/1 "2024-11-15T09:53:42Z")

</div>

@jptrinh hi jp, i watched your video about animation and its working to show dropdown open but i have issue with the fade out animation for dropdown close

here’s the video explanation what im trying to do

https://www.loom.com/embed/852a7ac33952406e88e48461e6c3641b?sid=c345c5b1-9d1d-4f2f-bc23-e6571e8d62c7

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [November 18, 2024, 8:31am UTC](https://community.weweb.io/t/weweb-fade-out-animation-with-keyframes/14546/2 "2024-11-18T08:31:46Z")

</div>

Hey @liam_putra  
The issue is that all the properties are changed at the same time, so that means that your dropdown get the display: none instantly.  
You’d need to first apply the change of opacity, and after that, modify the display property…  
Not sure there is an easy approach here.