خودتان امتحان کنید

<html>
<head>
   <style>
   .triangle {
       width: 100px;
       height: 100px;
       background-color: #000000;
       border-left: 50px solid #FF0000;
       border-right: 50px solid #FF0000;
       border-bottom: 50px solid #0088FF;
       border-top: 50px solid #0088FF;
       animation: tr 4s infinite linear;
	   -webkit-animation: tr 4s infinite linear; /* Safari and Chrome */
	   
   }
   @keyframes tr {
       0% {
           width: 100px;
           height: 100px;
       }
       25% {
           width: 0px;
           height: 0px;
       }
       50% {
           width: 0px;
           height: 0px;
       }
       75% {
           width: 100px;
           height: 100px;
       }
       100% {
           width: 100px;
           height: 100px;
       }
   }
   @-webkit-keyframes tr  /* Safari and Chrome */
	}
		0% {
			   width: 100px;
			   height: 100px;
		   }
		25% {
		   width: 0px;
		   height: 0px;
		}
		50% {
		   width: 0px;
		   height: 0px;
		}
		75% {
		   width: 100px;
		   height: 100px;
		}
		100% {
		   width: 100px;
		   height: 100px;
		}
   }
   </style>
</head>
<body>
   <div class="triangle"></div>
</body>
</html>

Report a Problem: