css3 transition
안녕하세요 TriplexLab입니다.
css3 속성중 transition은 원하는 요소에 자연스러운
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
저 같은 퍼블리셔들이 혹은 프론트앤드 개발자들이 항상 최신 기술에 관해서
속성명
설명
transition-property: width 어떤 속성에게 변형을 적용할지 지정합니다.
transition-duration: 1s 몇초동안 변형속성을 적용할지 지정한다.
transition-delay: .5s 이벤트 발생 후 몇초 후 변형을 적용할지 지정합니다.
transition-timing-function: ease-in-out 변형스타일을 지정합니다.(수치변형함수를 지정합니다.)
transition에 4가지 종류를 축약해서 사용할수도 있습니다.
EX) transition: all 1s ease-in-out; transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); duration delay transition-timing-function
예제를 통해서 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body,a,ul,li {
padding: 0;
margin: 0;
}
.wrap {
max-width: 960px;
margin: 30px auto;
}
.btn {
width: 100%;
text-align: center;
display: inline-block;
background-color: dodgerblue;
color: #fff;
padding: 10px 20px;
/*transition은 hover위치가 아닌 여기에 작성을 해주셔야 합니다.*/
transition: all 1s ease-in-out;
}
.btn:hover {
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="wrap">
<a href="#" class="btn">MORE</a>
</div>
</body>
</html>
ransition-timing-function: 는 ease-in-out 말고도 종류가 많은데
-webkit-transition-timing-function : linear;
-o-transition-timing-function : linear;
transition-timing-function : linear;
/*처음부터 끝까지 일정한 속도로 변형*/
-webkit-transition-timing-function : ease;
-o-transition-timing-function : ease;
transition-timing-function : ease;
/*처음에는 느니다가 중간에 빨랐다가 마지막에 다시 느려짐*/
-webkit-transition-timing-function : ease-in;
-o-transition-timing-function : ease-in;
transition-timing-function : ease-in;
/*처음에는 느리다가 중간까지 빠라지고 속도 유지*/
-webkit-transition-timing-function : ease-out;
-o-transition-timing-function : ease-out;
transition-timing-function : ease-out;
/*처음에는 빨랐다가 느려짐*/
-webkit-transition-timing-function : ease-in-out;
-o-transition-timing-function : ease-in-out;
transition-timing-function : ease-in-out;
/*느리게 시작하고 느리게 끝냄*/
-webkit-transition-timing-function : cubic-bezier(n,n,n,n);
-o-transition-timing-function : cubic-bezier(n,n,n,n);
transition-timing-function : cubic-bezier(n,n,n,n);
/*베지에 함수를 이용하여 속도 조절. n 값에는 0부터 1사이의 값을 입력할 수 있습니다.*/transition-timing-function관해서 사이트 하나 열려드릴게요~ 너무 좋은것 같네요
cubic-bezier.com
cubic-bezier.com
첨부 파일도 드립니다.^^ 다운받아서 연습해보세요~
