HTML : <h2 class = 'asdf'>안녕</h2>
자바스크립트 : document.querySelector('.asdf').addEventListener('click' , function(){
document.querySelector('.asdf').classList.toggle('asdf-show')
})
CSS :
.asdf{
font-size: 50px;
transition: all 1s;
}
.asdf-show{
font-size: 100px
}
여기서 클릭하면 글자크기가 부드럽게 커지는건데요
근데 이게 왜 작동이 되는거에요? 코드대로라면 페이지가 한번 로드될때 (사이트에 들어갔을때만) 1초동안 폰트사이즈가 50으로 바뀌는거 아닌가요? CSS가 어떻게 작동하길래 클래스를 붙이고 뗄때 부드럽게 작동하는건가요?
