SASS | TRANSITION / ANIMATION

엄문주·2020년 11월 15일
0

TRANSITION

속성을 사용해서 일정시간동안 요소의 속성값을 변화시키는 거라고 하는데, 그냥 버튼 아이콘 이런 것들을 크게 키웠다가, 움직였다가, 하는 것이라고 생각하면 될 것 같습니다. 아래 코드를 보면, btn 태그와 hover를 볼 수 있습니다. btn에는 기본 상태값을 입력하고, hover에는 변경될 값을 입력하면 됩니다.

.btn {
	font-size: 30px;
    	text-decoration: none;
        opacitiy: 1;
        transition: all 10s; 
        //모든 요소를 변경하겠으면, all을 적용하면 됩니다. 
        숫자는 지속시간을 의미합니다. s는 초를 의마하구요.
        transition: font-size 5s; //font-size에만 적용
        }
        transition: font-size 5s, opacity 10s; 
        //각각의 요소에 적용하는 시간을 다르게 할 때
       &:hover {
       		font-size: 50px;
            	text-decoration: underline;
                opcity: 2;
                }

ANIMATION

애니메이션 효과에서 대해서 공부해 봅시다!!!!!

먼져 애미메이션 효과를 만들어야 합니다. 0%는 효과가 시작될 위치를 의미하고, 100%는 효과가 끝나는 시점입니다.

@keyframes animationEffect(원하는 이름으로 설정하세요) {
	0% {
    	transform: tranlate(100px, -20px), scale(크기)  
        //요소의 위치나 크기를 변경할 때 사용 translate는 위치, scale은 크기 
	}
    100% {
    
    }
}

다음으로는 적용할 부분에 효과를 적용해 봅시다~~

.box {
	animation-name: animationEffect; //적용할 애니메이션
    	animation-duration: 10s; //애니메이션 지속시간
        animation-fill-mode: forwards; 
        //애니메이션의 마지막 상태를 유지하고 싶을 때 사용
        animation-fill-mode: backwards;
        //애니메이션이 끝난 후 시작점으로 돌아옵니다. 
        animation-fill-mode: both;
        //애니메이션의 앞 뒤 결과를 조합하여 설정
        animation-iteration-count: 3; //애니메이션을 실행하는 횟 수
        animation-delay: 3; //애니메이션을 3초있다가 실행하도록~
      }
profile
세상과 소통을 꿈꾸는 개발자

0개의 댓글