window.addEventListener('click', function(e){
	console.log(e.clientX, e.clientY);
})

// clientX : x축 위치
// clientY : y축 위치

winiw.addEventListeer('click', fucntion (e) {
	ballElem.style.transform = 'translate(' e.clientX + 'px, ' + e.clientY + 'px)';
}

// 트랜지션이 끝나면 공이 파란색으로 변하개
ballElem.addEventListener('transitioned', function(e){
	ballElem.classList.add('emd'); // end 클래스가 붙으면 파란색으로 바낌;;
	console.log(e.elapsedTime); // transition-duration 
	console.log(e.propertyName) // transition 바뀐 속성이 찎힘.
})

transitionend : 끝날때 실행

transitionstart : 시작할때 실행

@keyframes ball-ani {
	0% {
	transform : translate(0,0);
}
100%{
	transform : translate(200px, 200px);
}
}

.ball{

	animation : ball-ani 1s 3 alternate;
}

ballElem.addEvemtLister('animationend', function (){
	ballElm.classList.add('end');
})

css class가 붙었을때 animation을 실행 하게 할것인지,

지바스크립트로 자체적으로 요소에 style 속성으로 animation을 바로 줄것인지

animationiteration : 반복이 일어날때 실행되는 이벤트 ! (animationoteration count 속성만큼);

ballElem.addEventListener('animationiteration', function () {
	console.log('반복');
})