My cshtml page includes a Popup that I created, but I encountered an issue with keyframes. When I tried to use it without keyframes, the fade effect was lost. I am looking for a way to fix my @keyframes. (I tested the code on Chrome and Opera)
I found the codes at https://www.w3schools.com/howto/howto_js_popup.asp. Initially, I attempted to place each code in different files like CSS in a separate file and calling it within the cshtml file, and did the same for JavaScript. However, when this didn't work, I decided to include all the codes inside the cshtml page.
// As a newbie here, I apologize for not knowing how to highlight the problem in the code. Thus, I pasted it here.
@-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>
// Rest of the form...
</form>
</div>
// More content...
This is my _Layout cshtml:
// Content from the _Layout file...
Error message screenshot: enter image description here