HTML
2016.06.22 09:45

Transition에 대해 알아보자.

조회 수 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;

 

 

?
  • ?
    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>

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