#4.0 Transitions
transition : 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법
조건1. transition은 state가 없는 엘리먼트(처음 생겨난 곳)에 작성해야함
조건2. 적용하고 싶은 property는 state가 없는 엘리먼트와 state가 있는 엘리먼트 둘 다에 있어야한다.
![]() |
![]() |
![]() |
#4.1 Transitions pt.2
ease-in function : 브라우저에게 애니메이션이 어떻게 변할지 말해준다.
#4.2 Transformations
img {
border: 5px solid orange;
border-radius: 50%;
animation: transform 5s ease-in-out;
}
img:hover {
transform: scale(2,2) rotate(150deg, 0);
}
transform - CSS: Cascading Style Sheets | MDN
transform CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. The source for this interactive example is stored
developer.mozilla.org
#4.3 Animations pt.1
@keyframes miffyFlip {
from {
transform: rotateY(0);
}
to {
transform: rotateY(180deg) translateX(100px);
}
}
img {
border: 5px solid orange;
border-radius: 50%;
animation: miffyFlip 5s ease-in-out infinite;
}
But, 변한 후에 바로 원상복귀하여 부자연스러움.
#4.4 Animations pt.2
@keyframes miffyFlip {
0% {
transform: rotateY(0);
}
25% {}
50% {
transform: rotateY(180deg) translateX(100px);
}
75% {}
100% {
transform: rotateY(0) translateX(0);
}
}
img {
border: 5px solid orange;
border-radius: 50%;
animation: miffyFlip 5s ease-in-out infinite;
}
Animista
Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.
animista.net
#4.5 Media Queries
@media screen and (orientaion: landsacpe) {} // 디바이스의 방향 or portrait
@media screen and (min-device-width: 100px) {} // only in device, not desktop browser
@media print {} // 출력 화면일 때
미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN
미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.
developer.mozilla.org
'Front-end > 코코아톡 클론 코딩' 카테고리의 다른 글
#5 Git and Github (0) | 2024.04.22 |
---|---|
#6 Cloning Time (0) | 2021.03.10 |
#0 INTRODUCTION (0) | 2021.03.02 |
#3 CSSⅰ (1) | 2020.08.26 |
#2 HTML (0) | 2020.08.21 |