• 0

[ASP.NET] CSS3 animations won't work

Asked by Briman0094,

 Share

Question

Community Regular

Briman0094

Posted
Posted

I have an ASP.NET website with some fancy CSS coding to make things fade in and out, and I am trying to get a login "window" to slide in from the top when the user clicks "Log In". I have everything working except the "@keyframes" selector. If I have it above any of my other CSS, that CSS gets disabled. I have used "@-webkit-keyframes" instead of "@keyframes" since it is the only method supported currently, and it still doesn't work. I have tried both IIS Express and the normal ASP.NET development server and neither have worked so far. I have gotten "@keyframes" to work in other web pages, just running directly in my browser and written in plain HTML, but I can't get it to work with this. What should I do?

P.S. Please don't reccomend JQuery, as I don't want to use a lot of JavaScript in my website. I am aware that this current method will only work in certain browsers, and I don't really care if it doesn't work in IE because it is not a high-traffic website and if somebody wants to see it in "full glory" they can use Chrome.

Link to comment
https://www.neowin.net/forum/topic/1012152-aspnet-css3-animations-wont-work/
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Community Regular

Briman0094

Posted
  • Author
Posted

Sorry, forgot to post it.

Default.aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Debug="true"%>
<%@ Register TagPrefix="asp" TagName="CustomLogin" Src="CustomLogin.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">t;html xmlns="http://www.w3.org/1999/xhtml">;head runat="server">
<title>Home</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="formMain" runat="server" method="post">
    <div id="navbar" runat="server">
        &lt;a href="Default.aspx">Home</a>     &lt;!--Middle :)--&gt;
        &lt;asp:LoginStatus ID="LoginStatus" runat="server" class="loginstatus" LogoutAction="Redirect" LogoutPageUrl="Default.aspx"/>     &lt;asp:LoginName ID="LoginName" runat="server" class="loginname"/&gt;
    &lt;/div&gt;
    &lt;div id="divLogin" class="divLogin" runat="server" visible="false"&gt;

            &lt;asp:Login id="Login" runat="server" CreateUserText="Register" 
                CreateUserUrl="register.aspx" PasswordRecoveryText="Forgot password?" 
                PasswordRecoveryUrl="forgot.aspx" CssClass="login" DestinationPageUrl="Default.aspx" TextLayout="TextOnLeft" Orientation="Vertical" HyperLinkStyle-VerticalAlign="Middle" HyperLinkStyle-HorizontalAlign="Center" HyperLinkStyle-Height="32" HyperLinkStyle-Wrap="False" HyperLinkStyle-Width="128"&gt;
                &lt;LayoutTemplate&gt;
                    &lt;asp:Label id="LabelUsername" runat="server" Text="Username:"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                    &lt;asp:TextBox id="UserName" runat="server"&gt;&lt;/asp:TextBox&gt;&lt;br /&gt;
                    &lt;asp:Label id="LabelPassword" runat="server" Text="Password:"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                    &lt;asp:TextBox id="Password" runat="server" TextMode="Password"&gt;&lt;/asp:TextBox&gt;&lt;br /&gt;
                    &lt;asp:CheckBox id="RememberMe" runat="server" Text="Remember me"&gt;&lt;/asp:CheckBox&gt;&lt;br /&gt;&lt;br /&gt;
                    &lt;asp:LinkButton ID="Login" class="a" runat="server" Text="Login" /&gt;&lt;a runat="server" href="register.aspx">Register</a>                 &lt;asp:Label id="FailureText" runat="server" Text="Login failed!" Visible="false"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                &lt;/LayoutTemplate&gt;
            &lt;/asp:Login&gt;
    &lt;/div&gt;
    &lt;p&gt;
        Welcome to my website!
    &lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

main.css:

@font-face
{
    font-family: segoe;
    src: url('segoeui.ttf');
}
@font-face
{
    font-family: segoe;
    font-weight: bold;
    src: url('segoeuib.ttf');
}
@font-face
{
    font-family: segoe;
    font-style: italic;
    src: url('segoeuii.ttf');
}
@font-face
{
    font-family: segoe;
    font-weight: bold;
    font-style: italic;
    src: url('segoeuiz.ttf');
}

body
{
    background-color: #aaa;
    font-family: segoe;
    color: #000;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 0px;
    padding-top: 24px;
}

#navbar
{
    background-color: #333;
    color: #aaa;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 24px;
    width: 70%;
    padding: 0px 15% 0px 15%;
}

#navbar a
{
    position: relative;
    float: left;
    width: 128px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    cursor: default;
    background-color: #333;
    color: #aaa;
    box-shadow: #333 0px 0px 0px;
    transition-property: background-color, color, box-shadow;
    transition-duration: 1s;
    -webkit-transition-property: background-color, color, box-shadow;
    -webkit-transition-duration: 0.5s;
}

#navbar a:hover
{
    background-color: #08f;
    color: #333;
    box-shadow: #08f 0px 0px 8px;    
}

#navbar a:active
{
    background-color: #f80;
    color: #333;
    box-shadow: #f80 0px 0px 8px;    
}

#navbar .loginstatus
{
    position: relative;
    float: right;
    width: 64px;
}

#navbar .loginstatus a
{
    width: 64px;
}

#navbar .loginname
{
    position: relative;
    float: right;
    margin: 0px 8px 0px 8px;
}

.divLogin
{
    background-color: #444;
    position: absolute;
    right: 5%;
    top: 24px;
    color: #aaa;
    margin-top: 0px;
    padding: 8px;
    font-size: 10pt;
    width: 192px;
    opacity: 1;
    text-align: left;
    z-index: -1;
    border-radius: 0px 0px 8px 8px;
    -webkit-animation: login 1s;
}

.divLogin a,.a
{
    padding: 4px;
    margin: 4px;
    margin-top: 4px;
    text-decoration: none;
    cursor: default;
    background-color: transparent;
    color: #aaa;
    box-shadow: #333 0px 0px 0px;
    -webkit-transition-property: background-color, color, box-shadow;
    -webkit-transition-duration: 0.5s;
}

.divLogin a:hover
{
    background-color: #08f;
    color: #333;
    box-shadow: #08f 0px 0px 8px;    
}

@-webkit-keyframes login
{
    from: {top: -128px;}
    to: {top: 24px;}
}

Right now everything works as it should except that the login sheet doesn't slide down from the top. It just appears.

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Redesigned Windows 11 Start menu: What users wanted and what Microsoft delivered

      By +Eternal Tempest · Posted

      Seem like they are seeking for a one size fits all. You have power users and "what's a computer" generation growing up on phones, tablets, and Chromebooks.
    • Redesigned Windows 11 Start menu: What users wanted and what Microsoft delivered

      By +Eternal Tempest · Posted

      Guessing it was profitable enough inserting prompted apps vs the hate it generated.
    • Steam overlay's FPS counter gets major upgrade to show CPU and VRAM usage, temps, and more

      By Thiefyo · Posted

      Also good for Debugging or troubleshooting your game.. i dont get it why nvidia app or amd does not show this data.. if steam can do it..
    • Facebook's mobile app is finally getting support for passkeys

      By Thiefyo · Posted

      i have it since 3rd june
    • Microsoft reportedly planning to lay off thousands of employees, mostly in sales

      By Usama Jawad96 · Posted

      Microsoft reportedly planning to lay off thousands of employees, mostly in sales by Usama Jawad Back in May 2025, Microsoft decided to lay off 3% of its workforce, which amounted to roughly 6,000 employees. It claimed that this decision allowed it to implement better organizational changes in a "dynamic marketplace". Now, a new report claims that the Redmond tech firm is planning to lay off thousands more next month. Citing unnamed sources, Bloomberg reports that as the company continues investing heavily in its AI ventures, it is about to announce layoffs of thousands of workers as early as next month. This reduction in workforce will primarily affect sales teams, but they won't be the only ones affected. That said, the sources did mention that the timing for this announcement may change. This move, if true, won't be entirely surprising. In April 2025, Microsoft announced that it will be relying more on third-party firms to sell its software to small- and medium-sized customers. It's currently unclear how many employees will be impacted by this change, but even if the layoff percentage is in the single digits, it would still be significant as it would be impacting the professional careers of thousands. The May 2025 layoffs primarily impacted engineering and product teams. The other major round of layoffs prior to this was the decision to eliminate 10,000 jobs back in January 2023. Those represented 5% of the total workforce at that time, with numerous teams, including the one leading Mixed Reality (MR) efforts, being heavily impacted. It is interesting to note that if the timing of the announcement for layoffs is accurate, it would be soon after Microsoft closes its fiscal year at the end of June 2025. Although we'll get financial reports for the latest quarter soon after too, one has to wonder what the human cost of profit is, as Microsoft continues to report billions of dollars in revenue every quarter. Source: Bloomberg (paywall)

  • Recent Achievements

    • First Post
      Fuzz_c earned a badge
      First Post
    • First Post
      TIGOSS earned a badge
      First Post
    • Week One Done
      slackerzz earned a badge
      Week One Done
    • Week One Done
      vivetool earned a badge
      Week One Done
    • Reacting Well
      pnajbar earned a badge
      Reacting Well

  • Popular Contributors

    1. 1
      +primortal
      704
    2. 2
      ATLien_0
      285
    3. 3
      Michael Scrip
      213
    4. 4
      +FloatingFatMan
      194
    5. 5
      Steven P.
      131
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!