ivalexandru/css_animations_beatingHeart.html

## css_animations_beatingHeart.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<link rel="stylesheet" href="styles.css">

<!-- back e doar culoarea din fundal -->
<style>
  .back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s;
    animation-iteration-count: infinite;

  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;
    animation-iteration-count: infinite;

  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

</style>


<script>

</script>

</head>
<body>

  <div class="back"></div>
  <div class="heart"></div>


</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="styles.css">

	<!-- back e doar culoarea din fundal -->
	<style>
	.back {
	position: fixed;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: white;
	animation-name: backdiv;
	animation-duration: 1s;
	animation-iteration-count: infinite;

	}

	.heart {
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: pink;
	height: 50px;
	width: 50px;
	transform: rotate(-45deg);
	animation-name: beat;
	animation-duration: 1s;
	animation-iteration-count: infinite;

	}
	.heart:after {
	background-color: pink;
	content: "";
	border-radius: 50%;
	position: absolute;
	width: 50px;
	height: 50px;
	top: 0px;
	left: 25px;
	}
	.heart:before {
	background-color: pink;
	content: "";
	border-radius: 50%;
	position: absolute;
	width: 50px;
	height: 50px;
	top: -25px;
	left: 0px;
	}

	@keyframes backdiv {
	50% {
	background: #ffe6f2;
	}
	}

	@keyframes beat {
	0% {
	transform: scale(1) rotate(-45deg);
	}
	50% {
	transform: scale(0.6) rotate(-45deg);
	}
	}

	</style>


	<script>

	</script>

	</head>
	<body>

	<div class="back"></div>
	<div class="heart"></div>


	</body>
	</html>