• 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

    • AI Scraping Is Getting Out of Hand...

      By Gerowen · Posted

      I've put it behind a login for the time being.  I had something like 600,000 requests from just from Alibaba IP addresses that didn't clarify they were bots or scrapers, and so not easy to block using user agent filtering.  I didn't have any issues with bandwidth or accessibility, but that's 600,000 requests just from one cloud provider made to my spinning rust hard drives, that I have to personally pay for when they die, by bots being ran by corrupt mega corporations ignoring my polite requests that they not scrape me and that the information only be accessed by real humans. If any of y'all here were actually using my Kiwix mirror, I have no issue whatsoever creating a username and password for you, just hit me up using one of the methods listed on my personal site and I'll make one for you. https://marcusadams.me
    • Microsoft locks Windows 11 user out, shows how easy losing data from forced encryption is

      By computerdave91111 · Posted

      I always turn encryption off 1st boot, crazy its on by default on new computers, it should ASK you ON or OFF on 1st boot,, So many people dont even know its on , then forget their windows login and microsoft account,, RETarDED Microsoft is now, , i also find having it on slows things down too
    • Slack Business+ plan jumps to $15/month as AI features launch

      By BoondockSaint · Posted

      Adding AI is just an excuse to hike prices. I don't want any AI features in our Slack workspace and yet will have to pay for it.
    • MY sandisk ultra usb 3.0 256gb it only shows like 3.1gb

      By lethalman · Posted

      Hello Could you be kind too help me fix this 3.1gig and not 256gig it says 3.1gig only .someone told me to fix it with this https://www.disk-partition.com/articles/64gb-flash-drive-only-showing-32gb-5740i.html yes my sandisk ultra usb 3.0 256gb wont show up in full .  but i don't know want options i have to use on there can someone  please guide me with step by step instructions please  guide me with step by step instructions on how to repair this .sorry for asking but I've tried but i don't know want i have to do on that programme please help me i am on windows 11 home thank you nick
    • Google adds a new model to the Gemini 2.5 family

      By the420kid · Posted

      AI is as big a scam as FTX was...run by the same 'group' of people as well.

  • Recent Achievements

    • Week One Done
      vivetool earned a badge
      Week One Done
    • Reacting Well
      pnajbar earned a badge
      Reacting Well
    • Week One Done
      TBithoney earned a badge
      Week One Done
    • First Post
      xuxlix earned a badge
      First Post
    • First Post
      Tomek Święcicki earned a badge
      First Post

  • Popular Contributors

    1. 1
      +primortal
      673
    2. 2
      ATLien_0
      288
    3. 3
      Michael Scrip
      223
    4. 4
      +FloatingFatMan
      195
    5. 5
      Steven P.
      144
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!