• 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

    • From cars to cosmos: Honda's experimental rocket aces first landing test

      By +sphbecker · Posted

      Weird how some people don't need to crash 7 rockets before they get it right.
    • Switch 2 users report annoying rumble notifications

      By +sphbecker · Posted

      Or it's a bug that can easily be fixed with an update. My guess is the limitation is there to prevent game makers from doing dumb things like having a racing game constantly rumble while the car is in motion. Sounds like the threshold or detection needs to be tweaked if it is triggering for no reason.
    • IT admins will soon be able to provision cloud apps rather than entire Windows 365 Cloud PCs

      By +sphbecker · Posted

      Nice I guess. Azure's DaaS feature has supported that for years. It's so odd to me how MS is deploying Azure and 365 DaaS as two totally different services with different features. I would think the 365 cloud desktops would just be a slightly dumbed down frontend that manages the same service.
    • Microsoft announces multi-year partnership with AMD for future of Xbox consoles and hardware

      By Ringo Tanner · Posted

      Oh and gaming on a PC cost way more. To get PS5 Pro performance on a PC it will cost you more, especially with the crazy GPU costs today. While you can play Last of US and Horizon, finally, you cant play GT7 unless you have a PS5 (other games as well).
    • IT admins will soon be able to provision cloud apps rather than entire Windows 365 Cloud PCs

      By Usama Jawad96 · Posted

      IT admins will soon be able to provision cloud apps rather than entire Windows 365 Cloud PCs by Usama Jawad As we discussed earlier, Windows 365 Cloud PC is a neat way to access virtualized operating systems without getting access to physical hardware. It makes it much easier to work in hybrid or remote environments using hardware and software managed on the cloud by your organization. However, Microsoft is making this process even more convenient with a private preview for Windows 365 Cloud Apps. In its announcement, Microsoft has revealed that it is testing a way to deliver individual apps to users securely via Windows 365, instead of having an entire Cloud PC provisioned for them. It is important to note that these apps will still be hosted on the Cloud PC, a user just won't need access to a dedicated Cloud PC. Microsoft believes that this improved way of app delivery will facilitate seasonal and remote workers by getting them access to just the line-of-business (LOB) apps that they require, while also offering centralized and simplified management capabilities. Importantly, Redmond believes that this will facilitate migration from on-prem virtual desktop infrastructure (VDI) to the cloud too. Deploying this new experience is fairly straightforward for any IT admin who has prior experience with setting up Windows 365. They will need to select an "app-only" experience during the configuration process instead of the full desktop mode and then control the licenses and app access. During this private preview period, only apps available in the Start menu of the gallery or custom images are supported, but more types of apps will be supported for streaming as we get closer to general availability (GA). On the end-user side, customers with Cloud Apps provisioned for them will be able to launch them from the Windows App gateway. Any security policy that applies to the associated Cloud PC will also apply to the Cloud App in use. Microsoft has encouraged those interested in joining the private preview to contact their Microsoft account team or fill in this form. There is no word yet regarding general availability.

  • Recent Achievements

    • 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
    • Week One Done
      TBithoney earned a badge
      Week One Done
    • First Post
      xuxlix earned a badge
      First Post

  • Popular Contributors

    1. 1
      +primortal
      668
    2. 2
      ATLien_0
      284
    3. 3
      Michael Scrip
      223
    4. 4
      +FloatingFatMan
      196
    5. 5
      Steven P.
      137
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!