애니메이션 효과
화면 전환 시 애니메이션 효과를 넣고 싶어서 여러 사이트들을 찾아보았다.
생각했던 것과 똑같은 것을 찾지는 못했지만 정말 많은 애니메이션 효과가 있다는 것을 알았다.
그리고 만드는 것은 굉장히 까다롭지만 사용하는 것은 정말 쉬웠다.
tympanus 사이트의 scale 효과를 1주차 과제인 자기소개 웹 페이지에 적용시켰다.
적용시킬 class에 추가
-webkit-animation: scaleUpCenter .4s ease-out both; animation: scaleUpCenter .4s ease-out both;
css 파일에 넣고 link
@-webkit-keyframes scaleUp {
from { opacity: 0; -webkit-transform: scale(.8); }
}
Allday