✔ 뷰어로 보기

HTML

2016.06.22 09:45

Transition에 대해 알아보자.

KKMS

조회 수 13707 추천 수 0 댓글 8

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

Transition은 한 스타일에서 다른 스타일로 변화되는 과정을 제어하는 CSS이다.

1. transition-property - 변화 할 대상요소를 기술함

transition-property: none, all, 속성 이름

예) transition-property: all; /* 모든 요소를 변경대상으로 지정 */

transition-property: background-color; /* 변경요소를 배경색만 지정 */

transition-property: background-color, border; /* 배경색과 보더를 지정 */

2. transition-duration - 변화 할 시간을 기술;

변화가 일어나는 시간을 초단위(뒤에 s추가)로 기술

transition-duration: 3s; /* 3초 동안 변경시행 */

3. transition-timing-fuction - 시간단위로 변화의 속도를 조정

속성값:

linear - 시작가 끝을 똑같이 처리

ease - 천천히-> 빨리 -> 천천히 (기본값)

ease-in - 시작을 느리게

ease-out - 끝을 느리게

ease-in-out

4. transition-delay - 작동의 지연을 초단위로 설정

transition-delay: 1s; /* 1초후 트랜지션을 개시함 */

<style>
.ex div {
width: 200px;
height: 200px;
background-color: red;
border-radius: 0px;
transition-property: background-color, border-radius;
-webkit-transition-property: background-color, border-radius;
-moz-transition-property: background-color, border-radius;
-ms-transition-property: background-color, border-radius;
-o-transition-property: background-color, border-radius;
transition-duration: 3s; 
transition-timing-function: linear;
transition-delay: 1s;
}
.ex:hover div {
background-color: blue;
border-radius: 100px;
}
</style>
<div class="ex">
<div>트랜지션</div>
</div>

5. 모두 한번에 기술도 가능

transition: prorperty값 duration값 timing-functon값 delay값

예) transition: background-color 1s linear;

-moz-transition: background-color 1s linear;

-webkit-transition: background-color 1s linear;

-ms-transition: background-color 1s linear;

-o-transition: background-color 1s linear;

Prev 2. DIV요소의 수평정렬과 수직정렬

2. DIV요소의 수평정렬과 수직정렬 2015.12.23by Sass 소개 Next Sass 소개 2019.09.19by

위로 아래로 댓글로 가기 인쇄

✔댓글 쓰기

에디터 선택하기

✔ 텍스트 모드 ✔ 에디터 모드

댓글 쓰기

에디터 사용하기 닫기

Comments '8'

?
kkms4001@gmail.com 2016.07.12 13:46

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
* {
margin: 0px;
padding: 0px;
text-align: center;
}
.box {
width: 200px;
height: 50px;
border: 1px solid blue;
}
.button {
color: blue;
}
</style>
</head>
<body>
<input type="text" id="num1" class="box" value=""> +
<input type="text" id="num2" class="box" value=""> =
<input type="text" id="num3" class="box" valeu="" readonly>
<input type="button" id="sum" class="box button" value="합계" onclick="fsum()">
<script>
function fsum() {
var n1, n2, sum;
n1 = parseFloat(document.getElementById('num1').value);
n2 = parseFloat(document.getElementById('num2').value);
n3 = n1+n2;
document.getElementById('num3').value = sum;
}
</script>
</body>
</html>

수정 삭제 댓글
?
KKMS 2016.11.04 12:08

<style>
* {
margin: 0px; padding: 0px;
}
.mainMenu {
width: 50px;
height: 20px;
border-top: 1px solid red;
}
.subMenu {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid blue;
border-radius: 20px;
text-align: center;
line-height: 33px;
position: absolute;
top:30px;
left: 20px;
opacity: 0;
}
.menuList {
list-style: none;
}
.mainMenu:hover .subMenu {
opacity: 1;
}
.contents {
width: 95%;
margin: 20px;
}
</style>
<div class="mainMenu">메뉴
<div class="subMenu">
<ul class="menuList">
<li>서브1</li>
<li>서브2</li>
<li>서브3</li>
</ul>
</div>
</div>
<div class="contents">
테슬라 공동창업자 "안전과 보안 문제 보완 주력해야" K글로벌 콘퍼런스 "제주도, 자율주행차 시범 테스트에 적합"
테슬라 공동창업자 "안전과 보안 문제 보완 주력해야"

K글로벌 콘퍼런스 "제주도, 자율주행차 시범 테스트에 적합"

(샌프란시스코=연합뉴스) 김현재 특파원 = "현재 (미국) 대부분 회사의 자율주행차 상용화 수준은 90%까지 도달했다. 그러나 남은 10%가 이전의 90% 보다 더 힘든 여정이 될 것이다."

마틴 에버하드 테슬라 공동창업자 겸 전CEO(최고경영자)는 3일 오후 (현지시간) 미국 캘리포니아주 샌타클래라의 '리바이스 스타디움'에서 개최된 'K 글로벌@실리콘 밸리' 콘퍼런스에 참석해 "자율주행의 가장 핵심적 분야는 센서와 소프트웨어가 될 것"이라며 이같이 말했다.
</div>

수정 삭제 댓글
?
KKMS 2016.11.04 15:05

<style>
* {
margin: 0px; padding: 0px;
}
.mainMenu {
width: 50px;
height: 50px;
border-top: 1px solid red;
}
.subMenu {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid blue;
border-radius: 20px;
text-align: center;
line-height: 33px;
position: absolute;
top:30px;
left: 20px;
opacity: 0;
}
.subSubSub {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid blue;
border-radius: 20px;
text-align: center;
line-height: 33px;
position: absolute;
top:30px;
left: 100px;
opacity: 0;
}
.menuList {
list-style: none;
}
.mainMenu:hover .subMenu {
opacity: 1;
transition: all 0.5s linear;
}
.subSub:hover .subSubSub {
opacity: 1;
transition: all 0.5s linear;
}
.contents {
width: 95%;
margin: 20px;
margin-top: -20px;
}
</style>
<div class="mainMenu">메뉴
<div class="subMenu">
<ul class="menuList">
<li>서브1</li>
<li class="subSub">서브2 >
<div class="subSubSub">
<ul class="menuList">
<li>SubSub 1</li>
<li>SubSub 1</li>
<li>SubSub 1</li>
</ul>
</div>
</li>

<li>서브3</li>
</ul>
</div>
</div>
<div class="contents">
테슬라 공동창업자 "안전과 보안 문제 보완 주력해야" K글로벌 콘퍼런스 "제주도, 자율주행차 시범 테스트에 적합"
테슬라 공동창업자 "안전과 보안 문제 보완 주력해야"

K글로벌 콘퍼런스 "제주도, 자율주행차 시범 테스트에 적합"

(샌프란시스코=연합뉴스) 김현재 특파원 = "현재 (미국) 대부분 회사의 자율주행차 상용화 수준은 90%까지 도달했다. 그러나 남은 10%가 이전의 90% 보다 더 힘든 여정이 될 것이다."

마틴 에버하드 테슬라 공동창업자 겸 전CEO(최고경영자)는 3일 오후 (현지시간) 미국 캘리포니아주 샌타클래라의 '리바이스 스타디움'에서 개최된 'K 글로벌@실리콘 밸리' 콘퍼런스에 참석해 "자율주행의 가장 핵심적 분야는 센서와 소프트웨어가 될 것"이라며 이같이 말했다.
</div>

수정 삭제 댓글
?
KKMS 2016.11.04 16:02

<style>
* {
margin: 0px; padding: 0px;
}
.mainMenu {
width: 50px;
height: 50px;
border-top: 1px solid red;
}
.subMenu {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid blue;
border-radius: 20px;
text-align: center;
line-height: 33px;
position: absolute;
top:30px;
left: 20px;
visibility: hidden;
}
.subSubSub {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid blue;
border-radius: 20px;
text-align: center;
line-height: 33px;
position: absolute;
top:30px;
left: 100px;
visibility: hidden;
}
.menuList {
list-style: none;
}
.mainMenu:hover .subMenu {
visibility: visible;
transition: all 0.5s linear;
}
.subSub:hover .subSubSub {
visibility: visible;
transition: all 0.5s linear;
}
.contents {
width: 95%;
margin: 20px;
margin-top: -20px;
}
</style>
<div class="mainMenu">메뉴
<div class="subMenu">
<ul class="menuList">
<li>서브1</li>
<li class="subSub">서브2 >
<div class="subSubSub">
<ul class="menuList">
<li>SubSub 1</li>
<li>SubSub 1</li>
<li>SubSub 1</li>
</ul>
</div>
</li>

<li>서브3</li>
</ul>
</div>
</div>
<div class="contents">
테슬라 공동창업자 "안전과 보안 문제 보완 주력해야" K글로벌 콘퍼런스 "제주도, 자율주행차 시범 테스트에 적합"
테슬라 공동창업자 "안전과 보안 문제 보완 주력해야"
K글로벌 콘퍼런스 "제주도, 자율주행차 시범 테스트에 적합"
(샌프란시스코=연합뉴스) 김현재 특파원 = "현재 (미국) 대부분 회사의 자율주행차 상용화 수준은 90%까지 도달했다. 그러나 남은 10%가 이전의 90% 보다 더 힘든 여정이 될 것이다."
마틴 에버하드 테슬라 공동창업자 겸 전CEO(최고경영자)는 3일 오후 (현지시간) 미국 캘리포니아주 샌타클래라의 '리바이스 스타디움'에서 개최된 'K 글로벌@실리콘 밸리' 콘퍼런스에 참석해 "자율주행의 가장 핵심적 분야는 센서와 소프트웨어가 될 것"이라며 이같이 말했다.
</div>

수정 삭제 댓글
?
KKMS 2017.05.16 13:58

<style>
.tri{
width: 0px;height: 0px;
border-top:50px solid none;
border-bottom:50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
.tri-box{
width: 50px;height: 50px;
border-top:50px solid red;
border-bottom:50px solid pink;
border-right: 50px solid blue;
border-left: 50px solid gold;
}
</style>

<p class="tri">HOHO</p>
<p class="tri-box">HOHO</p>

수정 삭제 댓글
?
KKMS 2017.12.28 10:42

<style>

.A { font-size: 1em; }

.B { font-size: 1em; }

.C { font-size: 1em; }

</style>

<div class="A">THERE!

<div class="B">HI!

<p class="C">HELLO</p>

</div>

</div>

댓글
?
HJH 2019.05.17 15:23

<html>

<head>

<meta charset="uft-8">

<style>

*{ margin:0px; padding: 0px;}

.Mheader {

width:300px;

height:440px;

border:2px double black;

position: absolute;

top: 50%;

left: 50%;

margin-top:-220px;

margin-left: -150px;

}

.mbar{

width:280px;

height:30px;

margin-top:20px;

margin-left:10px;

text-align: right;

}

.navi {

width:278px;

height:325px;

border:1px solid black;

margin-top:20px;

margin-left:9px;

}

.list {

width:55px;

height:55px;

border:1px solid blueviolet;

position: relative;

left:7%;

margin-top:5px;

margin-left:1px;

background-color:aquamarine;

cursor:pointer;

}

.list2{

position: relative;

left:7%;

top:2%;

width:118px;

height:55px;

border:1px solid blueviolet;

background-color:aquamarine;

text-align: center;

cursor:pointer;

}

</style>

</head>

<body>

<header class="Mheader">

<input type="text" id="mbar" class="mbar" placeholder="0" disabled="disabled">

<nav class="navi">

<input type="button" class="list" id="list0" value="0">

<input type="button" class="list" id="list1" value="*">

<input type="button" class="list" id="list2" value="+">

<input type="button" class="list" id="list3" value="/">

<br>

<input type="button" class="list" id="list4" value="7">

<input type="button" class="list" id="list5" value="8">

<input type="button" class="list" id="list6" value="9">

<input type="button" class="list" id="list7" value="-">

<br>

<input type="button" class="list" id="list8" value="4">

<input type="button" class="list" id="list9" value="5">

<input type="button" class="list" id="list10" value="6">

<input type="button" class="list" id="list11" value="=">

<br>

<input type="button" class="list" id="list12" value="1">

<input type="button" class="list" id="list13" value="2">

<input type="button" class="list" id="list14" value="3">

<input type="button" class="list" id="list15" value=".">

<br>

<input type="reset" class="list2" id="list16" value="reset">

<input type="button" class="list2" id="list17" value="←">

</nav>

</header>

<script>

this.onclick = function(e){

var mbar = document.getElementById("mbar");

var list0 = document.getElementById("list0");

var list1 = document.getElementById("list1");

var list2 = document.getElementById("list2");

var list3 = document.getElementById("list3");

var list4 = document.getElementById("list4");

var list5 = document.getElementById("list5");

var list6 = document.getElementById("list6");

var list7 = document.getElementById("list7");

var list8 = document.getElementById("list8");

var list9 = document.getElementById("list9");

var list10 = document.getElementById("list10");

var list11 = document.getElementById("list11");

var list12 = document.getElementById("list12");

var list13 = document.getElementById("list13");

var list14 = document.getElementById("list14");

var list15 = document.getElementById("list15");

var list16 = document.getElementById("list16");

var list17 = document.getElementById("list17");

if(e.target.id == "list0"){

mbar.value +="0";

}

if(e.target.id == "list1"){

mbar.value +="*";

}

if(e.target.id == "list2"){

mbar.value +="+";

}

if(e.target.id == "list3"){

mbar.value +="/";

}

if(e.target.id == "list4"){

mbar.value +="7";

}

if(e.target.id == "list5"){

mbar.value +="8";

}

if(e.target.id == "list6"){

mbar.value +="9";

}

if(e.target.id == "list7"){

mbar.value +="-";

}

if(e.target.id == "list8"){

mbar.value +="4";

}

if(e.target.id == "list9"){

mbar.value +="5";

}

if(e.target.id == "list10"){

mbar.value +="6";

}

if(e.target.id == "list11"){

mbar.value=eval(mbar.value);

}

if(e.target.id == "list12"){

mbar.value +="1";

}

if(e.target.id == "list13"){

mbar.value +="2";

}

if(e.target.id == "list14"){

mbar.value +="3";

}

if(e.target.id == "list15"){

mbar.value +=".";

}

if(e.target.id == "list16"){

mbar.value =" ";

}

}

</script>

</body>

</html>

수정 삭제 댓글
?
GJ. 2019.05.31 11:39

CSS만 사용하여 움직이는 햄버거메뉴만들기

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

* { margin: 0px; padding: 0px; }

html,body { background: #2b2828; }

#btn { display: none; }

label {

cursor: pointer;

position: fixed;

top: 50%;

left: 50%;

margin: -24px -24px;

}

.open {

width: 48px;

height: 48px;

background: #525252;

z-index: 2;

border-radius: 5px;

transition: transform 0.6s, background 0.3s;

}

.open::after, .open::before { content: ""; }

.open span, .open::after, .open::before {

content: "";

position: absolute;

top: 50%;

left: 30%;

width: 40%;

border-bottom: 2px solid #fff;

transition: transform 0.6s ease;

}

.open::before { transform: translateY(8px); }

.open::after { transform: translateY(-8px); }

#btn:checked + .open span { transform: scaleX(0);}

#btn:checked + .open::before { transform: rotate(45deg); }

#btn:checked + .open::after { transform: rotate(-45deg); }

.open:hover { background: #8f8f8f; }

.open:active { background: #464545; }

</style>

</head>

<body>

<input type="checkbox" id="btn">

<label for="btn" class="open"><span></span></label>

</body>

</html>

수정 삭제 댓글

Category

List of Articles
번호	분류	제목	날짜	조회 수
41	HTML	4. DIV안에 DIV 넣어 정렬하기 5	2015.12.23	134703
40	HTML	5. DIV를 통한 헤더 만들기 1	2015.12.24	83946
39	HTML	6. DIV를 통한 전체 화면 사용하기 & 응용 2	2015.12.24	53803
38	HTML	3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1	2015.12.23	24261
37	HTML	8. PHP를 통한 index파일의 구성 1	2015.12.28	19804
36	HTML	10. position: absolute; 에 대해 알아보자 1	2015.12.30	19672
35	HTML	JavaScript의 반복문을 알아보자. 2	2016.02.24	16534
34	HTML	2. DIV요소의 수평정렬과 수직정렬	2015.12.23	15482
»	HTML	Transition에 대해 알아보자. 8	2016.06.22	13707
32	SASS	Sass 소개	2019.09.19	13118
31	HTML	Form 요소 설명 4	2016.06.01	12831
30	HTML	DIV 제거와 CSS 코드 줄이기	2016.02.17	10580
29	HTML	li 에 대해 알아보자. 2	2016.02.15	10342
28	HTML	요소의 수직정렬을 알아보자. 1	2016.03.01	10340
27	HTML	1. Inline 요소와 Block 요소에 대한 이해	2015.12.22	10127
26	HTML	11. viewport를 활용한 반응형 예제	2015.12.31	9208
25	HTML	9. position: relative; 에 대해 알아보자	2015.12.29	8553
24	HTML	7. position: static; 에 대해 알아보자.	2015.12.28	7257
23	HTML	class 에 대해 알아보자. 1	2016.02.16	6740
22	HTML	하나의 class = 하나의 디자인 ?????	2016.02.23	6204

쓰기

KKMS' Blog

Transition에 대해 알아보자.

단축키

단축키

IMLAC [1970] PDS-1

TOSHIBA [1980] T-200

TERTA [1980] Tap34

금성 [1982] FC-100

Vector Graphics [1976] Vector 1