How to use css @keyframes inside an cshtml page?

Here is my cshtml page. I wanted to make a PopUp inside my cshtml. I created popup but it was having an issue with keyframes; then I tried to use it without keyframes but it lost it is fade how can I fix my @keyframes 🙁 (tried the code on chrome and opera)

I got these codes from https://www.w3schools.com/howto/howto_js_popup.asp, first I tried to use every code in different places like putting css to css file and calling it inside the cshtml and did the same for JavaScript too but it didn’t worked this is why I used them all inside in cshtml page.

// I am new here I don't know how the highlight the problem in code so I pasted it here too sorry.
                           
@-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
@{
    ViewBag.Title = "Ekle";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<main>
    <div class="container-fluid px-4">
        <h1 class="mt-4">EKLE</h1>
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item active">Personel ekle</li>
        </ol>
        <div class="Personalbilgigiriş">
            <form>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-floating mb-3 mb-md-0">
                            <input class="form-control" id="inputFirstName" type="text" placeholder="Enter first name" />
                            <label for="inputFirstName">First name</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating">
                            <input class="form-control" id="inputSurname" type="text" placeholder="Enter Surname" />
                            <label for="inputSurname">Surname</label>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-floating mb-3 mb-md-0">
                            <input class="form-control" idid="inputOffice" type="text" placeholder="Office name" />
                            <label for="inputOffice">Office name</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating mb-3 mb-md-0">
                            <input class="form-control" id="inputAge" type="number" placeholder="Age" />
                            <label for="inputAge">Age</label>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-floating mb-3 mb-md-0">
                            <input class="form-control" id="inputStartdate" type="datetime" placeholder="Starting Date" />
                            <label for="inputStartdate">Starting date</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating mb-3 mb-md-0">
                            <input class="form-control" id="inputSalary" type="number" placeholder="Salary" />
                            <label for="inputSalary">Salary</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-10">
                  
                   
                   
                        <meta name="viewport" content="width=device-width, initial-scale=1">
                        <style>
                            /* Popup container - can be anything you want */
                            .popup {
                                position: relative;
                                display: inline-block;
                                cursor: pointer;
                                -webkit-user-select: none;
                                -moz-user-select: none;
                                -ms-user-select: none;
                                user-select: none;
                            }

                                /* The actual popup */
                                .popup .popuptext {
                                    visibility: hidden;
                                    width: 160px;
                                    background-color: #555;
                                    color: #fff;
                                    text-align: center;
                                    border-radius: 6px;
                                    padding: 8px 0;
                                    position: absolute;
                                    z-index: 1;
                                    bottom: 125%;
                                    left: 50%;
                                    margin-left: -80px;
                                }

                                    /* Popup arrow */
                                    .popup .popuptext::after {
                                        content: "";
                                        position: absolute;
                                        top: 100%;
                                        left: 50%;
                                        margin-left: -5px;
                                        border-width: 5px;
                                        border-style: solid;
                                        border-color: #555 transparent transparent transparent;
                                    }

                                /* Toggle this class - hide and show the popup */
                                .popup .show {
                                    visibility: visible;
                                    -webkit-animation: fadeIn 1s;
                                    animation: fadeIn 1s;
                                }

                            /* Add animation (fade in the popup) */
                            @-webkit-keyframes fadeIn {
                            from {opacity: 0;} 
                            to {opacity: 1;}
                            }

                            @keyframes fadeIn {
                            from {opacity: 0;}
                            to {opacity:1 ;}
                            }
                        </style>
                 
                 

                    <div class="popup" onclick="myFunction()">
                            <a class="btn btn-primary btn-block" style="text-align: center" >Save staff </a>

                            <span class="popuptext" id="myPopup">Staff Saved!</span>
                        </div>

                        <script>
                            // When the user clicks on div, open the popup
                            function myFunction() {
                                var popup = document.getElementById("myPopup");
                                popup.classList.toggle("show");
                            }
                        </script>

                  
                </div>
        </form>
    </div>
</div>
</main>


This my _Layout cshtml

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Dashboard - SB Admin</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css" rel="stylesheet" />
    <link href="/Content/css/styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
</head>
<body class="sb-nav-fixed">

    <div id="layoutSidenav">
        <div id="layoutSidenav_nav">
            @Html.Partial("_SideNavMenu")
        </div>
        <div id="layoutSidenav_content">
            @Html.Partial("_Header")
            <div class="Container">@RenderBody()</div>
            @Html.Partial("_Footer")
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="/Scripts/scripts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]" crossorigin="anonymous"></script>
    <script src="/Scripts/datatables-simple-demo.js"></script>

</body>
</html>

This is my error enter image description here

Answer

I recommend you refactor your css out of your razor template (separation of concerns) but to have the keyframes inline you need to double the @ symbol to escape that code so it doesn’t register as an error when you run/compile it.

Hat tip to this post covers escaping keyframes in your razor templates with @@: Razor output @-webkit-keyframes

So in your case update your keyframes with @@:

/* Add animation (fade in the popup) */
@@-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}
}

@@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}