속성을 사용해서 일정시간동안 요소의 속성값을 변화시키는 거라고 하는데, 그냥 버튼 아이콘 이런 것들을 크게 키웠다가, 움직였다가, 하는 것이라고 생각하면 될 것 같습니다. 아래 코드를 보면, 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;
}
애니메이션 효과에서 대해서 공부해 봅시다!!!!!
먼져 애미메이션 효과를 만들어야 합니다. 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초있다가 실행하도록~
}