Some Web Animations / Effects

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

-----------------------------------------------------------------------------------------------------------------------------------

HTML

CSS 3

Replace dv with the required class name.

-----------------------------------------------------------------------------------------------------------------------------------

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>