مشکل در ترنزیشن

    سلام استاد خوبین؟

    من امروز روی ترنزیشن ها تمرین می کردم الان کدی که نوشتم ترنزیشن رو زمان هاور انجام میده ولی وقتی از هاور خارج میشه دیگه با حالت ترنزیشن نیست سریع تغییر حالت میده میشه چک کنید لطفا ممنون

    #test{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            #test:hover{
                background-color: blue;
                transition: background-color 2s;
            }
     
     
    <div id="test"></div>

    سلام روز شما بخیر.. ممنونم

    ترنزیشن رو در قسمت هاور نوشتید این کار باعث میشه زمانی که از هاور خارج میشید افکت شما به حالت عادی اجرا بشه برای اینکه در هر دو حالت ورود و خروج ترنزیشن کار کنه باید در همون قسمت اول یعنی test# بنویسید ..

    به اینصورت:

     #test{
                width: 200px;
                height: 200px;
                background-color: red;
                transition: background-color 2s;

            }
            #test:hover{
                background-color: blue;
            }