css toggle nailboard effect

Question

The interface shown below toggles if the toggle button is clicked. For now I used only opacity to toggle the visibility but it doesn´t look even close what I am trying to achieve. I am trying to visualize the whole div in a way, that it look like it is pushed from the background to the front. You may know those child toys (nailboards).

Update - modified the code:

I added @keyframes for the opacity, visibility and box-shadow which I reversed. The result is ok but the could be improved. Overall I am fine with it but for sure an CSS would improve that easily.

  $("#toggle").click(function() {
            $(".wrapper").toggleClass("animate")
            $(".properties").toggleClass("animate")
            $(".button").toggleClass("animate-button")
        })

 body {
        font-size: 14px;
        font-family: 'Lato', sans-serif;
        text-align: left;
        color: #757575;
        cursor: default;
        overflow: hidden;
        background: #ECF0F3;
    }

    .wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 350px;
        padding: 40px 35px 35px 35px;
        margin: 30px;
        border-radius: 20px;
        background: #ecf0f3;
        visibility: hidden;
    }

    .animate {
        animation-name: fadeInDiv;
        animation-duration: 1s;
        animation-direction: normal;
        animation-fill-mode: forwards;
    }

    .animate-button {
        animation-name: fadeInButton;
        animation-duration: 1s;
        animation-direction: normal;
        animation-fill-mode: forwards;
    }

    @keyframes fadeInDiv {
        0% {
            opacity: 0.8;
            visibility: visible;
            box-shadow:  inset 0px 0px 0px #cbced1,
            inset -0px -0px 0px #ffffff;
        }
        100% {
            opacity: 1;
            visibility: visible;
            box-shadow: inset 10px 10px 10px #cbced1,
            inset -10px -10px 10px #ffffff;
           
        }
    }

    @keyframes fadeInButton {
        0% {
            box-shadow: 0px 0px 0px #b1b1b1,
                    -0px -0px 0px #ffffff;
        }
        100% {
            box-shadow: 3px 3px 8px #b1b1b1,
                    -3px -3px 8px #ffffff;
        }

    }

    #title {
        text-align: center;
        font-size: 24px;
        padding-top: 10px;
        letter-spacing: 0.5px;
    }

    .visible {
        visibility: visible;
    }

    #sub-title {
        text-align: center;
        font-size: 15px;
        padding-top: 7px;
        letter-spacing: 3px;
    }

    .field-icon {
      font-family: FontAwesome;
      font-size: 16px;
      padding-left: 10px;
      padding-right: 10px;
      width: 40px;
      color: #F59B69;
}
    
    .fields {
        width: 100%;
        padding: 45px 5px 5px 5px;
    }

    .fields input {
        border: none;
        outline: none;
        background: none;
        font-size: 16px;
        color: #555;
        padding:20px 10px 20px 5px;
        width: fit-content;
    }

    .properties {
        padding-left: 10px;
        margin-bottom: 20px;
        border-radius: 25px;
    }

    #confirm-button {
        position: relative;
        bottom: 0;
        left: 0;
        outline: none;
        border:none;
        cursor: pointer;
        width:100%;
        height: 50px;
        border-radius: 30px;
        font-size: 20px;
        color:#fff;
        text-align: center;
        background: #F59B69;
        margin-top: 30px;
    }

    #cancel-button {
        position: absolute;
        top: 0;
        right: 0;
        margin: 20px;
        outline: none;
        border:none;
        cursor: pointer;
        width: 50px;
        height: 30px;
        border-radius: 30px;
        font-size: 14px;
        color:#fff;
        text-align: center;
        background: #F59B69;
    }

    #confirm-button:hover, #cancel-button:hover {
        background:#fff;
        color: #F59B69;
    }

    #confirm-button:active, #cancel-button:active {
        box-shadow: inset 3px 3px 8px #b1b1b1,
                    inset -3px -3px 8px #ffffff;
    }

<!DOCTYPE html>
<html lang="de">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>CSS Playground</title>
    
    <!-- FontAwesome -->
    <script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script> 
    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
</head>

<body>
    <button id="toggle">toggle</button>

    <div class="wrapper">
        <div id="title">Title</div>
        <div id="sub-title">Sub-Title</div>
        <div class="fields">
            <div class="properties"><span class="field-icon"><i class="fa-solid fa-pen-to-square"></i></i></span><input placeholder="name"></div>        
            <div class="properties"><span class="field-icon"><i class="fa-solid fa-palette"></i></span><input placeholder="color"></div>
            <button class="button" id="confirm-button"><i class="fas fa-check-circle"></i></button>
        </div>
        <button class="button" id="cancel-button"><i class="fas fa-times-circle"></i></button>
    </div>
        

</body>
</html>

Answer 1

I think you are searching for animating visibility so it appears like a pin?

Although Animation in visibility is not really a thing Why visibilty animation doesn't work: Stackoverflow: Pure CSS animation visibility with delay (it steps instead of moves slowly) so you should ease in and ease out the effects that appear to give the DIV depth.

I can't be sure if you want the div to always be visible or just make it visible and then animate into the nailbord type.

In that case: visibility: hidden; -> visibility: visible; followed by: shadows / effects just after that with the same type (place a div under it or something)

If it's not clear I'll try to make an example this weekend.