CSS ANIMATION 실습 ✍️
📝 마우스오버 효과 애니메이션
✔️ 기본적인 메뉴 구조를 짜고 가상선택자 hover를 사용하여 마우스 오버했을 때의
효과를 설정해준다. (검은색의 블록 👉 반투명해지면서 블록의 위치가 바뀜)
✔️ 마우스오버 변화시 부드럽고 자연스러운 움직임을 위하여 li태그에 transition속성값을 입력.<style> .mouse-animation li { transition: opacity 0.5s, margin-left 0.5s; } 투명도 변화 0.5초, 마진값 변화 0.5초 </style>
opacity : 글자와 배경 투명도 영향 줌 (내용물 전체에 영향)
*배경만 투명도 주고싶다면 background-color로 rgba()값 - http://hex2rgba.devoth.com/ 참고
transform
rotate ( deg) 회전
scale (x축,y축); 비율 확대&축소
skew ( deg, deg) 애니메이션에 활용
translate (px, px) 선택한 오브젝트의 위치 변경 (x축/y축)
📝 move-box 애니메이션
animation
animation-name: changeWidhth; 애니메이션 이름 animation-duration: 4s; 애니메이션 동작 시간 animation-delay: 1s; 애니메이션 지연 시간 animation-timing-function: linear; 애니메이션의 속도 animation-iteration-count: 6; 애니메이션 진행 횟수 / infintie 무한 animation-direction: normal; 진행 방향 normal : 정방향 / alternate 왕복효과 > 진행 횟수 달라짐 animation-fill-mode: backwards; 애니메이션 키프레임 0%에 설정된 모습으로 사용자에게 보여짐
@keyframes코드는 (from/to)나 퍼센트값 입력.
@keyframes changeWidhth { from { } to { } } @keyframes changeWidhth { 0% { } 50% { } 100% { } }
https://www.w3schools.com/css/css3_2dtransforms.asp
🍦 css코드를 익스9에서도 사용하려면 👉 프리픽스 사용
-webkit- 크롬 사파리
-moz- 파이어폭스
-ms- 익스플로러
-o- 오페라
🍦 프리픽스 입력 예시
-webkit-animation : spinlion 1.5s linear infinite alternate;
@-webkit-keyframes spinlion {
from {
-webkit-transform: rotate(-10deg);
}
to {
-webkit-transform: rotate(10deg);
}
}🍦 복잡한 움직임 css 효과 적용할 때 팁
구글 - stylie 검색 https://jeremyckahn.github.io/stylie/ > output-size : 코드 디테일 조정
📝 슈퍼마리오 동전 효과 애니메이션
✔️모든 컨텐츠를 감싸고 있는 .mario-container에는 위치값 넣기 위해 position: relative 적용
✔️ 애니메이션이 들어가는 동전과 박스 .mario-coin / .mario-coin에 애니메이션 속성 입력<style> .mario-coin { animation: jumpCoin 0.8s linear infinite; } 애니메이션 이름/동작시간/속도/무한/alternate왕복효과 .mario-box { animation: jumpBox 0.5s linear infinite alternate; } </style>✔️ coin의 keyframes에는 y축 위치값(translateY), 회전(rotate), 투명도(opacity)
✔️ jumpBox의 keyframes에는 y축 위치값(translateY)
transition 코드 요약
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;위의 코드를 한줄로 요약하면 다음과 같다.
{ transition : width 2s linear 1s; }요약시 속성값의 순서는 상관없지만 duration - delay 순서는 지켜야 한다.
하나의 숫자값만 입력 > duration으로 인식함. (animation과 같다)
변화값 : hover에 입력
📝 마우스 오버 애니메이션 실습
✔️ image를 감싸고있는 div태그에 overflow를 입력하여 이미지가 확대되어도 div범위를 벗어나지 않도록 한다.
✔️ img 태그에는 vertical-align : middle입력하여 중앙정렬 및 공백이 생기지 않도록 한다.
✔️ 가상선택자 hover에는 동작 후의 변화값을 입력한다.<stlye> .hover-image:hover img { transform: scale(1.3); } 1.3배 확대됨 </stlye>✔️ 부드러운 변환을 위해 img태그에 transition: transform 0.3s linear; 입력
✔️ 텍스트 부분 코드<stlye> .image-info { position: absolute; 부모영역(div class:hover-image)를 기준으로 위치 잡기 위하여 absolute box-sizing: border-box; background-color: rgba(0, 0, 0, 0.5); 배경색의 투명도 조절을 위하여 rgba 입력 padding: 20px; width: 100%; left: 0; bottom: -85px; 마우스 오버 전에는 텍스트가 안보이게 하기 위하여 마이너스 위치값 입력 transition: bottom 0.3s linear; 일정한 속도로 바닥에서 부드럽게 나타남 } .hover-image:hover .image-info { bottom: 0; } 마우스 오버 후 텍스트가 올라옴 </stlye>
학습 소감
- vertical-align이 중심축을 맞춰줄 뿐만 아니라, 이미지의 공백도 방지할 수 있다는 사실을 알게 되었다.
- 효율적인 코딩을 위하여 transition이나 animation을 입력할 때 되도록이면 한줄 코딩으로 입력해야겠다.
- 여러가지 css 애니메이션 사이트들을 참고하여 애니메이션 코드에 대하여 조금 더 익숙해지도록 해야할 것 같다.
- 애니메이션 소스 적용
- 코드펜 > animation 검색
- 구글 - stylie 검색 https://jeremyckahn.github.io/stylie/ > output-size : 코드 디테일 조정
