Миний блог сайт

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
padding:100px 0;
background-color:#c33
}

#heart {
position: relative;
width: 100px;
height: 90px;
animation: heartbeat 1s infinite;
margin:0 auto
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fff;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;

transform: rotate(-45deg);

transform-origin: 0 100%;
}
#heart:after {
left: 0;

transform: rotate(45deg);

transform-origin :100% 100%;
}

@keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}

</style>
</head>

<body>
<div id="heart"></div>
<h1>Follow the heartbeat</h1>
</body>
</html>

CSS3 Animation-2

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.element {
height: 400px;
width: 400px;
background-color: red;
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
border-radius: 100%;
}

@keyframes pulse {
0%, 100% {
background-color: red;
}
50% {
background-color: orange;
}
}

@keyframes nudge {
0%, 100% {
transform: translate(0, 0);
}

50% {
transform: translate(150px, 0);
}

80% {
transform: translate(-150px, 0);
}
}

html, body {
height: 100%;
}

body {
display: flex;
align-items: center;
justify-content: center;
}
</style>

</head>

<body>

<div class="element"></div>
</body>
</html>