I've complied a few Web animations/effects, I have created and used for some of my projects. (I hope to add more in the coming months. ... )
-----------------------------------------------------------------------------------------------------------------------------------
Float Up Effect Using CSS3
HTML
- <div class="dv">
- Your HTML Code here !
- </div>
CSS 3
- .dv {
- position: fixed;
- bottom: 18%;
- left: 50%;
- width: 35%;
- animation-name: aFloatUpEffect;
- animation-duration: 2s;
- animation-timing-function: ease;
- }
-
-
- @keyframes aFloatUpEffect {
- from {
- bottom: 10%;
- opacity:0;
- }
-
- to {
- bottom: 18%;
- opacity:1;
- }
- }
Replace dv with the required class name.
-----------------------------------------------------------------------------------------------------------------------------------
Add blinking effect to your Website
HTML / CSS
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <script src="scripts/jquery-2.1.4.js"></script>
- <script src="scripts/jquery_ui_custom/jquery-ui.js"></script>
- <link href="scripts/jquery_ui_custom/jquery-ui.css" rel="stylesheet" />
- <style type="text/css">
- @keyframes blinknCSS {
- from {
- background-color: white;
- }
-
- to {
- background-color: greenyellow;
- }
- }
-
- #blinkMeC {
- width: 200px;
- height: 100px;
- background-color: white;
- animation-name: blinknCSS;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- animation-timing-function: linear;
- -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
- }
-
- #blinkMeJ {
- width: 200px;
- height: 100px;
- background-color: #FFFFFF;
- }
- </style>
- <script type="text/javascript">
- function blinky() {
- $("#blinkMeJ").animate({ "background-color": "#8beb4f" }, 2000, "linear", function () {
- $("#blinkMeJ").animate({ "background-color": "#FFFFFF" }, 2000, "linear");
- });
- window.setTimeout(function () { blinky() }, 4444);
- }
-
- $(document).ready(function () {
- blinky();
- });
- </script>
- </head>
- <body>
- <form id="frmBlink" runat="server">
- BLINKING ANIMATION IN WEB
- <hr />
- <div id="blinkMeC">
- Blinking using CSS
- </div>
- <hr />
- <div id="blinkMeJ">
- Blinking using Jquery
- </div>
- <hr />
- </form>
- </body>
- </html>
If you want a limited number of blinks.
For CSS - Change the "animation-iteration-count: " to the number of times you want.
For jQquery - Remove the "window.setTimeout".
-----------------------------------------------------------------------------------------------------------------------------------
Loading Animation on Page Load Using Font Awesome
Add below HTML below start of body tag.
- <div class="loader"><i class="fa fa-cog fa-spin" aria-hidden="true" title="Loading..."></i></div>
CSS
- .loader {
- position: fixed;
- left: 50vw;
- top: 50vh;
- z-index: 9999;
- font-size: 78px;
- opacity: 0.2;
- color: #ff0000;
- }
JAVASCRIPT
- $(window).load(function () {
- $(".loader").fadeOut("slow");
- })
-----------------------------------------------------------------------------------------------------------------------------------