[CSS] transition

VScode/CSS 2022. 9. 8. 17:23

transition: 애니메이션을 적용할 때 사용하는 기능(변형 속성)

종류

-transition: 모든 transition 속성을 한 번에 적용

-transition-delay: 이벤트 발생 후 몇 초 후에 재생할지 지정

-transition-duration: 몇 초 동안 재생할 지 지정

-transition-property: 어떤 속성을 변형할 지 지정

-transition-timing-function: 수치 변형 함수를 지정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transition.html</title>
    <style type="text/css">
    .box{width:100px; height:100px; background:orange; transition-duration:2s;} 
// 2초 동안 이벤트가 발생함
    .box:hover{width:300px; height:300px; background:green;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

변형함수(2D)

1. translate(X,Y): 지정한 크기만큼 x축과 y축으로 이동

2. tranlateX(X): 지정한 크기만큼 x축으로 이동

3. tranlateY(X): 지정한 크기만큼 y축으로 이동

4. scale(X,Y): 지정한 크기만큼 x축과 y축으로 확대 축소

5. scaleX(X): 지정한 크기만큼 x축으로 확대 축소

6. scaleY(Y): 지정한 크기만큼 y축으로 확대 축소

7. rotate(각도): 지정한 각도만큼 회전(단위:deg)

8. skew(X,Y): 지정한 크기만큼 x축과 y축으로 왜곡

9. skewX(X): 지정한 크기만큼 x축으로 왜곡

10. skewY(Y): 지정한 크기만큼 y축으로 왜곡

Translate

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Transform_Translate.html</title>
    <style type="text/css">
        .origin{width:200px; height:134px; border:1px solid black; float:left; margin:40px;}
        .movex, .movey, .movexy{transition-duration: 1s; 
/* == transition:1s; (duration 생략 가능)*/}
        .movex:hover{
            transform:translateX(50px);
            -webkit-transform: translateX(50px);
            -ms-transform: translateX(50px);
            -moz-transform: translateX(50px);
            -o-transform: translateX(50px);
        }
        .movey:hover{transform:translateY(50px); }
        .movexy:hover{transform:translate(30px,30px);}
    </style>
</head>
<body>
    <div class="origin">
        <div class="movex"><img src="images/bus.jpg"> </div>
    </div>
    <div class="origin">
        <div class="movey"><img src="images/bus.jpg"> </div>
    </div>
    <div class="origin">
        <div class="movexy"><img src="images/bus.jpg"> </div>
    </div>
</body>
</html>

Scale

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transform_Scale.html</title>
    <style type="text/css">
        .origin{width:210px; height:200px; border:1px solid black; float:left; margin:40px; overflow:hidden;}
        .scalex, .scaley, .scale{transition:1s;}
        .scalex:hover{transform:scalex(1.2);}
        .scaley:hover{transform:scaley(1.5);}
        .scale:hover{transform:scale(1.7);}
    </style>
</head>
<body>
    <div class="origin">
        <div class="scalex"><img src="images/fruit.jpg"> </div>
    </div>
    <div class="origin">
        <div class="scaley"><img src="images/fruit.jpg"> </div>
    </div>
    <div class="origin">
        <div class="scale"><img src="images/fruit.jpg"> </div>
    </div>
</body>
</html>

Rotate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transform_Rotate.html</title>
    <style type="text/css">
        .origin{width:210px; height:200px; border:1px solid black; float:left; margin:40px;}
        .rotate1, .rotate2{transition:1s;}
        .rotate1:hover{transform:rotate(40deg);}
        .rotate2:hover{transform:rotate(-40deg);}
/* deg는 우리가 알고 있는 각도(360도 한바퀴)로 해석해도 똑같이 적용됨 */
    </style>
</head>
<body>
    <div class="origin">
        <div class="rotate1"><img src="images/fruit.jpg"> </div>
    </div>
    <div class="origin">
        <div class="rotate2"><img src="images/fruit.jpg"> </div>
    </div>
</body>
</html>

Skew

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transform_Skew.html</title>
    <style type="text/css">
        .origin{width:160px; height:240px; border:1px solid black; float:left; margin:40px;}
        .skewx, .skewy, .skewxy{transition:1s;}
        .skewx:hover{transform:skewx(30deg);}
        .skewy:hover{transform:skewy(30deg);}
        .skewxy:hover{transform:skew(25deg, 15deg);}
    </style>
</head>
<body>
    <div class="origin">
        <div class="skewx"><img src="images/rose.jpg"> </div>
    </div>
    <div class="origin">
        <div class="skewy"><img src="images/rose.jpg"> </div>
    </div>
    <div class="origin">
        <div class="skewxy"><img src="images/rose.jpg"> </div>
    </div>
</body>
</html>

Origin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tansform_origin.html</title>
    <style type="text/css">
        .origin{width:160px; height:240px; border:1px solid black; float:left; margin:40px;}
        .ltop .rose{transform-origin:left top; transition:1s;}
        .lbottom .rose{transform-origin:right top; transition:1s;}
        .rtop .rose{transform-origin:left bottom; transition:1s;}
        .rbottom .rose{transform-origin:right bottom; transition:1s;}
        .rose:hover{transform:rotate(20deg);}
/* 여러항목이 동시 선택되는 선택자에 hover를 적용하면 마우스 포인터가 올라가는 각각의 선택사항에 개별적으로 적용됨. 
   실제 마우스 포인터가 올라가는 .rose에 회전 적용. */
    </style>
</head>
<body>
    <div class="origin">
        <div class="ltop"><img src="images/rose.jpg" class="rose">
        </div>
    </div>
    <div class="origin">
        <div class="rtop"><img src="images/rose.jpg" class="rose">
        </div>
    </div>
    <div class="origin">
        <div class="lbottom"><img src="images/rose.jpg" class="rose">
        </div>
    </div>
    <div class="origin">
        <div class="rbottom"><img src="images/rose.jpg" class="rose">
        </div>
    </div>
</body>
</html>

Ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TransformEx01.html</title>
    <style type="text/css">
        #base{position:relative; width:800px; height:400px; border:1px solid black;}
        #tire{position:relative; width:200px; height:200px; top:100px; background:red; border-radius:50%; 
             line-height:200px; text-align:center; font-size:50px; transition:2s; color:white; font-weight:bold;}
        #base:hover #tire{transform:translatex(400px) rotate(180deg) scale(1.5);}
    </style>
</head>
<body>
    <div id="base">
        <div id="tire">타이어</div>
    </div>
 <!-- base에 마우스를 올리면 tire가 오른쪽으로 이동+회전+크게 되도록 변경 -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TransformEx02.html</title>
    <style type="text/css">
        #base{width:250px; height:1000px; background:#595959;}
        #top{position:relative; width:100%; height:150px; border:1px solid white;}
        .menuall{position:relative; width:100%; height:40px; border:1px solid yellow; background:#232323; 
                 color:white; line-height:0px; text-align:center;}
        .submenuall{position:relative; width:100%; height:1px;  background:#989898;}

        #menu1:hover{color:orange;}
        #submenu1{transform-origin:top left;}
        #menu1:hover~#submenu1{transform:scaleY(100);}
        #menu1:hover~#menu2{transform:translateY(100px);}
        #menu1:hover~#menu3{transform:translateY(100px);}
        #menu1:hover~#menu4{transform:translateY(100px);}
        #menu1:hover~#menu5{transform:translateY(100px);}

        #menu2:hover{color:orange;}
        #submenu2{transform-origin:top left;}
        #menu2:hover~#submenu2{transform:scaleY(100);}
        #menu2:hover~#menu3{transform:translateY(100px);}
        #menu2:hover~#menu4{transform:translateY(100px);}
        #menu2:hover~#menu5{transform:translateY(100px);}

        #menu3:hover{color:orange;}
        #submenu3{transform-origin:top left;}
        #menu3:hover~#submenu3{transform:scaleY(100);}
        #menu3:hover~#menu4{transform:translateY(100px);}
        #menu3:hover~#menu5{transform:translateY(100px);}

        #menu4:hover{color:orange;}
        #submenu4{transform-origin:top left;}
        #menu4:hover~#submenu4{transform:scaleY(100);}
        #menu4:hover~#menu5{transform:translateY(100px);}

        #menu5:hover{color:orange;}
        #submenu5{transform-origin:top left;}
        #menu5:hover~#submenu5{transform:scaleY(100);}
    </style>
</head>
<body>
<!-- 메뉴에 마우스가 올라가면
1. 주메뉴의 글자색을 orange로 변경
2. 바로 아래에 있는 서브메뉴의 오리진을 top left 또는 top right로 변경
3. 아래쪽 주메뉴들을 각각 100px씩 아래로 이동하고 서브메뉴의 크기를 100으로 변경 -->
    <div id="base">
        <div id="top"></div>
        <div id="menu1" class="menuall"><h2>NEWS</h2></div>
        <div id="submenu1" class="submenuall"></div>
        <div id="menu2" class="menuall"><h2>PORTPOLIO</h2></div>
        <div id="submenu2" class="submenuall"></div>
        <div id="menu3" class="menuall"><h2>BOARD</h2></div>
        <div id="submenu3" class="submenuall"></div>
        <div id="menu4" class="menuall"><h2>ALBUM</h2></div>
        <div id="submenu4" class="submenuall"></div>
        <div id="menu5" class="menuall"><h2>CONTACT</h2></div>
        <div id="submenu5" class="submenuall"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product01.html</title>
    <style type="text/css">
        ul{list-style:none; margin:0; padding:0;}
        ul li{position:relative; float:left; padding:0; margin:10px; overflow:hidden;}
        .caption{position:absolute; width:300px; height:200px; top:200px; background:black; opacity:0.7;  transition:0.5s;}
        .caption h1, .caption p{color:white; text-align:center;}
        ul li:hover .caption{transform:translateY(-200px);}
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="images/prod1.jpg">
            <div class="caption">
                <h1>상품1</h1>
                <p>상품1: 설명 텍스트</p>
                <p>가격1: 12,234원</p>           
            </div>
        </li>
        <li>
            <img src="images/prod2.jpg">
            <div class="caption">
                <h1>상품2</h1>
                <p>상품2: 설명 텍스트</p>
                <p>가격2: 12,234원</p>           
            </div>
        </li>
        <li>
            <img src="images/prod3.jpg">
            <div class="caption">
                <h1>상품3</h1>
                <p>상품3: 설명 텍스트</p>
                <p>가격3: 12,234원</p>           
            </div>
        </li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Product02.html</title>
    <style type="text/css">
        .view{position:relative; width:600px; height:600px; border:5px dotted red; margin:0 auto; overflow:hidden;}
        .bigimg{position:relative; width:600px; height:400px; background:silver; color:white; margin:0; 
                text-align:center; line-height:400px; font-size:130%; font-weight:bold; opacity:0.5;}

        .box1{position:relative; width:198px; height:198px; border-radius: 50%; overflow:hidden; float:left;}

       .box2{position:absolute; left:-610px; top:0; transition:1s;}

        #btn_img1:hover~#view_img1{transform:translatex(610px);}
        #btn_img2:hover~#view_img2{transform:translatex(610px);}
        #btn_img3:hover~#view_img3{transform:translatex(610px);}
    </style>
</head>
<body>
    <div class="view">
        <div class="bigimg">이미지에 마우스를 올리면 큰 이미지 볼 수 있음</div>
        <div class="box1" id="btn_img1">
            <img src="images/prod1.jpg" width="198" height="198" >
        </div>
        <div class="box1" id="btn_img2">
            <img src="images/prod2.jpg" width="198" height="198" >
        </div>
        <div class="box1" id="btn_img3">
            <img src="images/prod3.jpg" width="198" height="198" >
        </div>
        <div class="box2" id="view_img1">
            <img src="images/prod1.jpg" width="600" height="400" >
        </div>
        <div class="box2" id="view_img2">
            <img src="images/prod2.jpg" width="600" height="400" >
        </div>
        <div class="box2" id="view_img3">
            <img src="images/prod3.jpg" width="600" height="400" >
        </div>
    </div>
</body>
</html>

Rotate 3D

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transform_Rotate3D.html</title>
    <style type="text/css">
        .no-pers, .pers{width:152px; height:180px; border:1px solid black; float:left; margin:30px; }
        .s{transition:0.5s;}
/* 바라보는 위치(perspective - 위치가 가까울수록 이미지 커짐
    ->이미지 극대화) */
        .pers .rotatex{transform-origin:left; perspective:100px;}
        .pers .rotatey{transform-origin:top; perspective:300px;}

        /* .pers .s{transform-origin:left top;} */
        /* pers class 왼쪽, 위쪽을 기준으로 rotate함 
           origin 설정을 따로 하지 않으면 이미지 가운데 축으로 회전*/

        .rotatex img:hover{transform:rotatex(50deg);}
        .rotatey img:hover{transform:rotatey(50deg);}
    </style>
</head>
<body>
    <h4>원본이미지</h4>
    <div><img src="images/sunset.jpg" alt=""></div>
    <div class="no-pers">
        <div class="rotatex">
          <img src="images/sunset.jpg" class="s"> </div>
    </div>
    <div class="pers">
        <div class="rotatex">
          <img src="images/sunset.jpg" class="s"> </div>
    </div>
    <div class="pers">
        <div class="rotatey">
          <img src="images/sunset.jpg" class="s"> </div>
    </div>
</body>
</html>

Keyframe

-from부터 to까지 움직임 또는 변화를 정의함

-변화될 애니메이션의 변경요소를 chang-bg라는 이름으로 정의함

-from: 최초상태, to: 변화된 상태

-from: 원래 요소가 갖고 있는 상태에다가 from에 기술된 상태를 더함

-change_bg: 각 키프레임들을 구분할 수 있는 개발자가 정의한 이름

-change_bg 애니메이션을 실행하는 명령이 포함된 css의 대상 요소는 from부터 to까지 설정된 시간 내에 애니메이션 효과를 내며 변화함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation_keyframe.html</title>
    <style type="text/css">
        #a{width:200px; height:200px; background:blue; margin:20px; animation-name:change_bg; animation-duration:2s;}
        #b{width:200px; height:200px; background:green; margin:20px; animation-name:change_bg;  animation-duration:2s;}
        /* 애니메이션 키프레임의 정의 - 움직임 또는 변화를 정의함 */
        @keyframes change_bg{
            from{border:1px solid black;}
            to{
                background:#a5d6ff; border:10px solid red; border-radius:50%;
            }
        }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
</body>
</html>

keyframe name을 지정하여 이용한 animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation_name.html</title>
    <style type="text/css">
        @keyframes shape{
            from{border:1px solid black;}
            to{border-radius:50%;}
        }
        @keyframes rotate{
            from{transform:rotate(0deg)}
            to{transform:rotate(45deg)}
        }
        div{width:200px; height:200px; float:left; margin:50px;}
        #box1{background:#4cff00; border:1px solid black; animation-name:shape; animation-duration:2s;}
        #box2{background:#8f06b0; border:1px solid black; animation-name:rotate; animation-duration:2s;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    
</body>
</html>

Count

-animation-iteration-count:애니메이션 반복 횟수. 숫자를 쓰면 그 횟수만큼 반복, infinite를 쓰면 무한 반복, 지정하지 않으면 1회 실행

-anibation-direction: 애니메이션의 진행 방향.

-지정이 안되어 있으면 정방향(from->to)

-animation-direction:reverse 역방향(to->from)

-animation-direction:alternate: 정방향 한번 역방향 한번 번갈아 가면서 진행

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation_Count.html</title>
    <style type="text/css">
        @keyframes moving{
            from{background:#faef7c; opacity:0.5; transform:scale(0.5)rotate(15deg);}
            to{width:400px; background:#ff9400; opacity:1; transform:scale(1) rotate(0deg);}
        }
        .box{margin-top:50px; margin-left:100px; padding:20px; height:60px; width:200px; animation-name:moving; 
             animation-duration:1.5s; animation-iteration-count:infinite; animation-direction: alternate;}
    </style>
</head>
<body>
    <div class="box">
        <h3>CSS3 Animation</h3>
    </div>
</body>
</html>

Ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AnimationKeyframeEx.html</title>
    <style type="text/css">
        body{overflow-x:hidden;}
        .box{position:relative; height:60px; width:400px; padding-left:50px; font-size:150%; line-height:60px; background:orange; animation-name:moving;
             animation-duration:6s; animation-direction: alternate; animation-iteration-count:infinite;}
        @keyframes moving{
            from{left:105%; opacity:0.2;}
            to{left:-500px; opacity:1;}
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>CSS3 Animation</h3>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AnimationKeyframeEx02.html</title>
    <style type="text/css">
        .box{position:relative; height:60px; width:400px; font-size:150%; line-height:60px; padding-left:50px;  
            background:orange; animation-name:moving; transform-origin:right top;
            animation-duration:2s; perspective:1000px; animation-iteration-count:infinite; animation-direction: alternate;  
        }
        @keyframes moving{
            from{transform:rotatey(0deg); }
            to{transform:rotatey(180deg);}
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>CSS3 Animation</h3>
    </div>
</body>
</html>

from과 to 사이에 변화주기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AnimationKeyframeEx03.html</title>
    <style type="text/css">
        .box{width:100px; height:100px; margin:60px; background:red; animation-name:rotate; 
             animation-duration:3s; animation-iteration-count:infinite; 
        }
        @keyframes rotate{
            from{background-color:red; perspective:120px rotatex(0deg) rotatey(0deg);}
            50%{ background-color:green; transform:perspective(120px) rotatex(-180deg) rotatey(0deg); }
            to{background:blue; transform:perspective(120px) rotatex(-180deg) rotatey(-180deg);}
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

저작자표시

'VScode > CSS' 카테고리의 다른 글

[CSS] layout (0)	2022.09.08
[CSS] position, display, visibilty, shadow (0)	2022.09.08
[CSS] background, font, button, gradiant (0)	2022.09.08
[CSS] pseudoclass (0)	2022.09.08
[CSS] border, checked, box model, list (0)	2022.09.08

ABOUT ME

im hippo im hippo

'VScode > CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'VScode > CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바