애니메이션기초

누구나 애니메이션 만드는 공식

애니메이션 만드는 공식 one-way 애니메이션을 만드는 공식을 알아보자. one-way 애니메이션이란? A→B처럼 한방향으로 흘러가는 애니메이션 예를들어 아래와 같은 경우가 있겠다. 투명도를 0 → 1 로 만들고싶을 때 margin left 10px → 300px font size가 15px → 30px 모든것은 세가지 기본단계의 원리만 알면 된다. 첫번째 시작스타일 최종스타일 을 CSS로 만들어놓는다. 두번째 자스로 내가 원할 때 최종스타일로 변하라고 코드를 짠다 세번째 시작스타일에 transition을 추가한다. 예제 1 모달창이 toggle 될 때 transition 주기 첫번째 단계 시작스타일 만들기 .black-bg { visibility: hidden; opacity: 0; } 최종스타일 만..