css-animation.html

<!DOCTYPE html>
<html>
<head>
	<title>Css Animation</title>
	<style type="text/css">
		.card{
			width: 300px;
			height: 300px;
			position: absolute;
			top: 50%;
			left: 50%;
			line-height: 300px;
			margin:-150px;
			background: white;
			color: #03446A;
			font-size: 40px;
			text-align: center;
			border:1px solid red;
			box-shadow:  0 0 15px rgba(0,0,0,0.1);

			/*animation-name: exampleAnimation;*/
			/*animation-duration: 3s;*/
			/*animation-iteration-count: infinite;*/
			/*animation-direction: normal;*/
			/*animation-direction: reverse;*/
			/*animation-direction: alternate;*/
			/*animation-direction: alternate-reverse;*/
			/*animation-delay: 2s;*/
			/*animation-timing-function: ease;*/
			/*steps(6) */
			animation: exampleAnimation 3s cubic-bezier(.27,1.34,.97,-0.08) infinite alternate-reverse ;	
		}

		/*declared */
		/*@keyframes exampleAnimation {
			from{border-radius: 0%;}
			to{border-radius: 50%;}
		}*/
		@keyframes exampleAnimation {
			0%{border-radius: 0%;background: red;}
			50%{border-radius: 25%;border:5px solid orange;background: yellow;}
			100%{border-radius: 50%;background: green;}
		}

		.card:hover{
			animation-play-state: paused;
		}
	</style>
</head>
<body>
	<div class="card">
		Web Dev
	</div>
</body>
</html>