i want the the page should animate only once... but it animated again and again when any button is pressed on that page.
What I have tried:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/motion-ui.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="script/motion-ui-starter/css/animate.css" rel="stylesheet" />
<link href="script/motion-ui-starter/css/motion-ui.css" rel="stylesheet" />
<link href="script/motion-ui-starter/css/foundation.css" rel="stylesheet" />
<link href="script/motion-ui-starter/css/style.css" rel="stylesheet" />
<script src="script/motion-ui-starter/js/vendor/modernizr.js"></script>
<style>
.animated {
animation-duration: 2s;
animation-delay: 0s;
animation-iteration-count: 1;
}
.flash {
animation-delay: 3s;
}
.auto-style1 {
width: 100%;
border: 2px solid #000066;
background-color: #cccccc;
}
.auto-style4 {
width: 513px;
height: 44px;
}
.auto-style7 {
height: 52px;
text-align: center;
color: #FFFFFF;
}
.auto-style9 {
height: 44px;
width: 1403px;
}
.auto-style10 {
height: 53px;
}
</style>
<script src="script/motion-ui-starter/js/script.js"></script>
<script src="script/motion-ui-starter/js/foundation.min.js"></script>
<script src="script/motion-ui-starter/js/vendor/jquery.js"></script>
<script src="script/motion-ui-starter/js/vendor/motion-ui.js"></script>
<script src="script/motion-ui-starter/css/Java.min.js"></script>
<script>
$('#div').ready(function () {
$('#div').removeClass();
$('#div').addClass('animated bounceInLeft');
$('#TextBox1').on('click', function () {
$('#TextBox1').addClass('animated shake');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
Login Here |
User ID | <asp:TextBox ID="TextBox1" ClientIDMode="Static" runat="server" Height="43px" Style="margin-left: 15px" Width="194px" CssClass="animated flash">
|
Password | <asp:TextBox ID="TextBox2" runat="server" Height="44px" Style="margin-left: 14px" Width="196px" CssClass="animated flash">
|
<asp:Button ID="Button2" runat="server" Height="36px" Text="LOGIN" Width="94px" />
|
<asp:Button ID="btnlogin" runat="server" Text="rename" style="position:absolute; top: 31px; left: 10px;" ClientIDMode="Static" />
</form>
</body>
</html>