#4 CSS ⅱ

#4.0 Transitions 

transition : 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법

조건1. transition은 state가 없는 엘리먼트(처음 생겨난 곳)에 작성해야함

조건2. 적용하고 싶은 property는 state가 없는 엘리먼트와 state가 있는 엘리먼트 둘 다에 있어야한다.

	transition 적용 전
	transition 적용 후

 

#4.1 Transitions pt.2

ease-in function : 브라우저에게 애니메이션이 어떻게 변할지 말해준다. 

matthewlein.com/tools/ceaser

cubic-bezier.com

easings.net/ko#

 

#4.2 Transformations 

transform: rotateY(45eg);

transform: rotateY(80deg);

transform: rotateY(180deg);

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

 

#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

 

 

#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