CSS를 이용해 문서를 꾸미다보면 여러개의 이미지를 배경으로 넣어야 할 때가 있다. 또 요새 애니메이션은 GSAP이라는 자바스크립트로 만든 애니메이션 라이브러리를 많이 이용하지만 그 동작원리나 원하는 애니메이션을 설계하기 위해서는 CSS를 통한 Animation 구성에 대해 이해해 볼 필요성이 있다.
오늘은 배경을 활용한 간단한 애니메이션을 만들어 보면서 Multiple Background를 설정하는 것과 CSS Animation에 대해 학습해 보았다.
Multiple Background
기본적으로 , 를 이용해 서로 다른 background의 url 혹은 색을 설정해주면 된다.
selector {
background-image : bg1, bg2, bg3, ...;
background-position: right bottom, left top, left bottom, ...;
background-repeat : no-repeat;
}이때 중요한 것은 background는 레이어가 뒤로 들어가기 때문에 처음에 넣어준 background가 제일 앞에 놓인다는것! 그리고 background로 색을 넣는것은 가장 마지막에만 가능하다는 것이다. 또 background-repeat속성에 no-repeat값만 넣어준 것 처럼 여러 background의 속성값이 동일하다면 한번만 적어주는 것도 가능하다.
추가로 다음과 같이 background shorthand 속성을 통해서도 작성 가능하다. 역시 공통된 값이 있다면 따로 빼주는게 편리하다.
selector {
background : bg1 right bottom no-repeat, bg2 left top no-repeat, bg3 left bottom no-repeat, ...;
}
selector2 {
background : bg1 right bottom, bg2 left top, bg3 left bottom, ...;
background-repeat : no-repeat;
}CSS Animation
CSS를 통해 애니메이션을 만드는 경우 무작정 만들기보다는 어떻게 구성할지 설계해보는것이 수월하다.
- Animation name - 내가 원하는 애니메이션이 어떻게 동작하는지 생각해보고 이름을 정한다.
- CSS property - 원하는 애니메이션을 구성하기 위해 필요한 CSS 속성이 무엇이 있는지 고민해본다.
예를들어 텍스트가 커지면서 나타나고 위치가 움직이는 애니메이션을 만든다고 하면 움직이니까 이름은 moveEffect로 정하고 텍스트가 커지려면? font-size, 나타나는 효과는 opacity나 color, 이동하는 효과는 padding, margin, position, translate를 이용하면 되겠다고 생각해두면 이를 이용해 쉽게 애니메이션을 만들 수 있다.
@keyframes moveEffect {
0% {
font-size: 12px;
opacity: 0;
transform: translate(0, 0);
}
100% {
font-size: 24px;
opacity: 1;
transform: translate(400px, 75px);
}
}이후 animation-duration(지속시간), animation-fill-mode(애니메이션이 종료 후 어떤 상태를 유지할지), animation-delay(애니메이션이 element가 로드되고 언제 시작할지)등과 같은 다양한 css animation 속성을 통해 원하는 선택자에 animation을 걸어주면 된다.
selector {
animation-name: moveEffect;
animation-duration: 2s;
animation-fill-mode: forwards;
}참고
