CSS ANİMASYON 1 (DÖNEN DAİRE)

CSS

    body {
    background-color: #000; 
    display: flex; 
	align-items:center;
    }
	
    @keyframes donus {
		0%   {transform:rotate(0deg);left:0;}	
		50%   {transform:rotate(360deg);left:calc(100% - 150px);}
		100%   {transform:rotate(0deg);left:0;}	

	}

	@keyframes scale {
		0%   {transform:scale(0)}			
		50%   {transform:scale(2)}			
        100%   {transform:scale(0)}			
	}


    div.ball {
		width:150px;
		height:150px;
		border-radius:50%; 
		background-image:linear-gradient(#000,#f00,orange);
		position: relative;
		display: flex;
		justify-content:center;
		align-items:center;
        animation-name: donus;  
		animation-duration: 4s;  	 
		animation-iteration-count: infinite;   
        box-shadow:5px 5px 30px #333
	}

	div.core {
		width:50px;
		height:50px;
		border-radius:50%;	
		background: none;	 
		background-color:#000;
        animation-name: scale;  
		animation-duration: 4s;  	 
		animation-iteration-count: infinite;   		 
	} 

HTML

<div class="ball">   
		<div class="core"></div> 
</div>