• 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.