.box1:hover {
background-color: blueviolet;
transition: background-color 300ms linear;
}
ex) transition-property: background-color
!! transition은 적용하고자 하는 태그에 넣어줘야함 !!
ex) transition-duration: 300ms는 트랜지션의 지속시간을 3초로 하겠다는것.
- linear : 처음부터 끝까지 일정한 속도로,
- ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
- ease-in : 전환(transition) 효과가 천천히 시작됩니다.
- ease-out : 전환(transition) 효과가 천천히 끝납니다.
- ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝납니다.
- cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
transition: background-color 300ms linear;
배경 색상 변경을 / 지속시간 3초로 / 전환속도 처음부터 끝까지 일정하게.
transition: all 200ms ease;
모두 / 지속시간 2초로 / 전환속도는 ease로.
.box1:hover {
background-color: blueviolet;
transition: background-color 300ms linear;
}
box1에 커서를 가져다 댔을때{
배경 색상을 blueviolet색으로 바꿉니다.
배경 색상을 트랜지션할때 지속시간은 3초로, 전환속도는 처음부터 끝까지 일정하게 합니다.
.box2:hover {
border-radius: 50%;
background-color: cornflowerblue;
transition: all 2s ease;
}
box2에 커서를 가져다 댔을때{
모서리를 50% 둥글게 바꿉니다.
배경 색상을 cornflowerblue색으로 바꿉니다.
all(배경색과 모서리 모두) 지속시간은 2초로, 전환속도는 ease로.
.box3:hover {
border-radius: 50%;
transform: translateX(400px);
background-color: cornflowerblue;
transition: all 3s ease;
}
box3에 커서를 가져다 댔을때{
모서리를 50% 둥글게 바꿉니다.
X축으로 400px 이동시킵니다.
배경 색상을 cornflowerblue색으로 바꿉니다.
all(모서리, 이동, 배경 색 변경) 지속시간은 3초, 전환속도는 ease로.