HTML
2016.06.22 09:45

Transition에 대해 알아보자.

조회 수 10427 추천 수 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 하나의 class = 하나의 디자인 ????? file 2016.02.23 4232
40 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 7504
» HTML Transition에 대해 알아보자. 8 2016.06.22 10427
38 SASS Sass 중첩 규칙과 속성 2019.09.19 434
37 SASS Sass 소개 2019.09.19 423
36 SASS SASS 샘플 2019.08.16 763
35 SASS Sass 변수 2019.09.19 430
34 SASS Sass String Functions 2019.09.19 581
33 SASS Sass Selector Functions 2019.09.19 341
32 SASS Sass Operators 2019.09.20 433
31 SASS Sass Numeric Functions 2019.09.19 411
30 SASS Sass Map Functions 2019.09.19 430
29 SASS Sass List Functions 2019.09.19 467
28 SASS Sass Introspection Functions 2019.09.19 404
27 SASS Sass Color Functions 2019.09.19 400
26 SASS Sass @while 2019.09.20 802
25 SASS Sass @mixin과 @include 2019.09.19 506
24 SASS Sass @import 2019.09.19 505
23 SASS Sass @if and @else 2019.09.20 461
22 SASS Sass @for 2019.09.20 487
Board Pagination Prev 1 2 3 Next
/ 3