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
  1. <div class="dv">
  2. Your HTML Code here !
  3. </div>
CSS 3
  1. .dv {
  2. position: fixed;
  3. bottom: 18%;
  4. left: 50%;
  5. width: 35%;
  6. animation-name: aFloatUpEffect;
  7. animation-duration: 2s;
  8. animation-timing-function: ease;
  9. }
  12. @keyframes aFloatUpEffect {
  13. from {
  14. bottom: 10%;
  15. opacity:0;
  16. }
  18. to {
  19. bottom: 18%;
  20. opacity:1;
  21. }
  22. }
Replace dv with the required class name.
-----------------------------------------------------------------------------------------------------------------------------------

Add blinking effect to your Website

HTML / CSS
  1. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title></title>
  6. <script src="scripts/jquery-2.1.4.js"></script>
  7. <script src="scripts/jquery_ui_custom/jquery-ui.js"></script>
  8. <link href="scripts/jquery_ui_custom/jquery-ui.css" rel="stylesheet" />
  9. <style type="text/css">
  10. @keyframes blinknCSS {
  11. from {
  12. background-color: white;
  13. }
  15. to {
  16. background-color: greenyellow;
  17. }
  18. }
  20. #blinkMeC {
  21. width: 200px;
  22. height: 100px;
  23. background-color: white;
  24. animation-name: blinknCSS;
  25. animation-duration: 1s;
  26. animation-iteration-count: infinite;
  27. animation-direction: alternate;
  28. animation-timing-function: linear;
  29. -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
  30. }
  32. #blinkMeJ {
  33. width: 200px;
  34. height: 100px;
  35. background-color: #FFFFFF;
  36. }
  37. </style>
  38. <script type="text/javascript">
  39. function blinky() {
  40. $("#blinkMeJ").animate({ "background-color": "#8beb4f" }, 2000, "linear", function () {
  41. $("#blinkMeJ").animate({ "background-color": "#FFFFFF" }, 2000, "linear");
  42. });
  43. window.setTimeout(function () { blinky() }, 4444);
  44. }
  46. $(document).ready(function () {
  47. blinky();
  48. });
  49. </script>
  50. </head>
  51. <body>
  52. <form id="frmBlink" runat="server">
  53. BLINKING ANIMATION IN WEB
  54. <hr />
  55. <div id="blinkMeC">
  56. Blinking using CSS
  57. </div>
  58. <hr />
  59. <div id="blinkMeJ">
  60. Blinking using Jquery
  61. </div>
  62. <hr />
  63. </form>
  64. </body>
  65. </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.
  1. <div class="loader"><i class="fa fa-cog fa-spin" aria-hidden="true" title="Loading..."></i></div>
CSS
  1. .loader {
  2. position: fixed;
  3. left: 50vw;
  4. top: 50vh;
  5. z-index: 9999;
  6. font-size: 78px;
  7. opacity: 0.2;
  8. color: #ff0000;
  9. }
JAVASCRIPT
  1. $(window).load(function () {
  2. $(".loader").fadeOut("slow");
  3. })
-----------------------------------------------------------------------------------------------------------------------------------