@-webkit-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } }
@-moz-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } }
@-ms-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } }
@-o-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } }

@-webkit-keyframes square-to-circle {
	0% { border-radius:0 0 0 0; background:coral; }
	25% { border-radius:50% 0 0 0; background:darksalmon; }
	50% { border-radius:50% 50% 0 0; background:indianred; }
	75% { border-radius:50% 50% 50% 0; background:lightcoral; }
	100% { border-radius:50%; background:darksalmon; }
}
@-moz-keyframes square-to-circle {
	0% { border-radius:0 0 0 0; background:coral; }
	25% { border-radius:50% 0 0 0; background:darksalmon; }
	50% { border-radius:50% 50% 0 0; background:indianred; }
	75% { border-radius:50% 50% 50% 0; background:lightcoral; }
	100% { border-radius:50%; background:darksalmon; }
}
@-ms-keyframes square-to-circle {
	0% { border-radius:0 0 0 0; background:coral; }
	25% { border-radius:50% 0 0 0; background:darksalmon; }
	50% { border-radius:50% 50% 0 0; background:indianred; }
	75% { border-radius:50% 50% 50% 0; background:lightcoral; }
	100% { border-radius:50%; background:darksalmon; }
}
@-o-keyframes square-to-circle {
	0% { border-radius:0 0 0 0; background:coral; }
	25% { border-radius:50% 0 0 0; background:darksalmon; }
	50% { border-radius:50% 50% 0 0; background:indianred; }
	75% { border-radius:50% 50% 50% 0; background:lightcoral; }
	100% { border-radius:50%; background:darksalmon; }
}
@keyframes square-to-circle {
	0% { border-radius:0 0 0 0; background:coral; }
	25% { border-radius:50% 0 0 0; background:darksalmon; }
	50% { border-radius:50% 50% 0 0; background:indianred; }
	75% { border-radius:50% 50% 50% 0; background:lightcoral;  }
	100% { border-radius:50%; background:darksalmon; }
}

.element {
	  height:500px;
	  width:500px;
	  background:#000000;
	  color:#FFFFFF;
	  font-weight:bold;
	  outline: 1px solid transparent;

	  -webkit-animation-name: fade; -webkit-animation-duration: 4s;
	  -webkit-animation-delay: 1s; -webkit-animation-iteration-count: infinite;
	  -webkit-animation-timing-function: linear; -webkit-animation-direction: alternate;

	  -moz-animation-name: fade; -moz-animation-duration: 4s;
	  -moz-animation-delay: 1s; -moz-animation-iteration-count: infinite;
	  -moz-animation-timing-function: linear; -moz-animation-direction: alternate;

	  -ms-animation-name: fade; -ms-animation-duration: 4s;
	  -ms-animation-delay: 1s; -ms-animation-iteration-count: infinite;
	  -ms-animation-timing-function: linear; -ms-animation-direction: alternate;

	  -o-animation-name: fade; -o-animation-duration: 4s;
	  -o-animation-delay: 1s; -o-animation-iteration-count: infinite;
	  -o-animation-timing-function: linear; -o-animation-direction: alternate;

	  animation-name: fade; animation-duration: 4s;
	  animation-delay: 1s; animation-iteration-count: infinite;
	  animation-timing-function: linear; animation-direction: alternate;

}

.element2 {
	  height:500px;
	  width:500px;
	  background:#DCDCDC;
	  color:#000000;
	  font-weight:bold;
	  outline: 1px solid transparent;

	  -webkit-animation-name: square-to-circle; -webkit-animation-duration: 2s;
	  -webkit-animation-delay: 1s; -webkit-animation-iteration-count: infinite;
	  -webkit-animation-timing-function: linear; -webkit-animation-direction: alternate;

	  -moz-animation-name: square-to-circle; -moz-animation-duration: 2s;
	  -moz-animation-delay: 1s; -moz-animation-iteration-count: infinite;
	  -moz-animation-timing-function: linear; -moz-animation-direction: alternate;

	  -ms-animation-name: square-to-circle; -ms-animation-duration: 2s;
	  -ms-animation-delay: 1s; -ms-animation-iteration-count: infinite;
	  -ms-animation-timing-function: linear; -ms-animation-direction: alternate;

	  -o-animation-name: square-to-circle; -o-animation-duration: 2s;
	  -o-animation-delay: 1s; -o-animation-iteration-count: infinite;
	  -o-animation-timing-function: linear; -o-animation-direction: alternate;

	  animation-name: square-to-circle; animation-duration: 2s;
	  animation-delay: 1s; animation-iteration-count: infinite;
	  animation-timing-function: linear; animation-direction: alternate;

}