transition 속성 전환
transition은 background, color, height, witch, transformation 등의 속성들에 애니메이션을 적용 하는것.
transition : property duration timingfunction;
- property : 애니메이션 시킬 속성을 사용함.
- duration : 시작해서 끝날 때까지 시간을 초 단위로 지정함.
- timingfunction : 속도 변화를 기술하는데 큰 차이를 느끼기 어렵지만 다음 항목들이 있다.
linear : 등속 cubic-bezier(0, 0, 1, 1)과 같음.
ease : 느리게 시작했다가 빨라졌다 다시 느려짐. cubic-bezier(0.25, 0.1, 0.25, 1)과 같음
ease-in : 점점 빨라짐. cubic-bezier(0.42, 0, 1, 1)과 같음.
ease-out : 점점 느려짐. cubic-bezier(0, 0, 0.58,1)과 같음.
ease-in-out : 처음과 끝이 느림. cubic-bezier(0.42, 0, 0.58,1)와 같음.
cubic-bezier(N,N,N,N) : 값을 입력하여 가/감속을 조작.
.moveMenu > li{
width:150px; padding:20px; height:30px; line-height:30px; border-bottom:1px solid #dddddd;
background:#e8e8e8; color:#666666;}
.bg{
transition:background 1.2s;
-moz-transition:background 1.2s;
-webkit-transition:background 1.2s;
-ms-transition:background 1.2s;
-o-transition:background 1.2s;
}
.delay-tr{
transition-delay:1s;
-moz-transition-delay:1s;
-webkit-transition-delay:1s;
-ms-transition-delay:1s;
-o-transition-delay:1s;
}
.multi-tr{
transition:background 0.1s ease, color 0.3s linear;
-moz-transition:background 0.1s ease, color 0.3s linear;
-webkit-transition:background 0.1s ease, color 0.3s linear;
-ms-transition:background 0.1s ease, color 0.3s linear;
-o-transition:background 0.1s ease, color 0.3s linear;
}
.moveMenu > li:nth-of-type(1):hover,
.moveMenu > li:nth-of-type(2):hover{background: #00ffbb;}
.moveMenu > li:nth-of-type(3):hover{background: #dd4466; color:#ffffff;}
See the Pen CSS3 transition by daeyun (@daeyun) on CodePen.
728x90
300x250