[CSS] CSS3 효과 애니메이션 ☑

728x90

속성효과

1. 불투명속성

마우스 올리면 선명하게 보이게 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마우스를올리면 선명하게 보이게 설정하기</title>
<style>
    a:link {
        opacity: 0.5;
}
/* :link 웹 문서에서 사용자가 방문하지 않았던 곳을 표시합니다.
 */
 /* 링크선택자 : link, visited */
    a:hover {
        opacity: 1.0;
    }
/* :hover는 웹 문서에서 사용자가 링크에 
   마우스 포인터를 올리는 순간을 나타냅니다.
*/
/* 반응선택자 : hover, active */
    img {
        opacity: 0.2;
    }
    img:hover {
        opacity: 1.0;
    }

</style>
</head>
<body>
    <h3>마우스를 올리면 선명하게 보입니다.</h3>
<div>
    <a href="http://www.google.com">구글웹사이트</a>
</div>
<p></p>
<div>
    <img src="pic.jfif">
</div>
</body>
</html>

: 가상클래스선택자는 어떤 상태를 지정한다. 이런상태는 태그,id,class처럼

html 문서상에 있는 것이 아니다.

가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며,

이를 가상 (추상)클래스라 한다.

텍스트상자안의 배경이미지를 반투명하게 처리하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트상자안의 배경이미지를 반투명하게처리하기</title>
<style>
div.background{
    background:url(sky.jpg) repeat;
    border: 1px solid black;
}
div.box{
    margin: 30px;
    background-color : #ffffff;
    border: 2px solid blue;
    opacity: 0.5;
}
div.box p{
    margin: 5%
    font-weight: bold;
    color: #000000;
    text-align: center;
}
</style>
</head>
<body>
<div class="background">
    <div class="box">
        <p>html5 웹프로그래밍</p>
    </div>
</div>
</body>
</html>

마우스를 올리면 힌트와 정답 보여주기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마우스를올리면힌트와정답보여주기</title>
    <style>
div.tip{
    opacity: 0.2;
}
div.ans{
    opacity: 0.0;
}
div.tip:hover {
    opacity: 1.0;
    color: red;
}
div.ans:hover {
    opacity: 1.0;
    color: blue;
}
    </style>
</head>
<body>
    <p>문제] css3에서 불투명도를 적용하기 위한 속성은?</p>
    <p>1. border</p>
    <p>2. opacity</p>
    <p>3. transparency</p>
    <p>4. visible</p>  
    힌트] <div class ="tip">불투명을 뜻하는 영문단어를 찾아보세요</div>
    <p></p>
    정답] <div class="ans">정답은 2번입니다</div>  
</body>
</html>

2. 가시성속성

가시성 visibility : hidden, 디스플레이 visibility : visible

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
.v1{
    visibility:hidden;
    border: 1px dotted red;
}
/* 가시성속성- 보이지 않도록 설정 : 공간있음 */
.v2{
    visibility: visible;
    border: 1px dotted red;
}
.v3{
    display: none;
    border: 1px dotted red;
}
/* 디스플레이속성-보이지 않도록 설정: 공간삭제 */
    </style>
</head>
<body>
    <div class="v1">
        <img src="sky.jpg">
    </div>
    <div class="v2">
        <img src="sky.jpg">
    </div>
    <div class="v3">
        <img src="sky.jpg">
    </div>
    <div class="v2">
        <img src="sky.jpg">
    </div>
</body>
</html>

3. 형식변화속성

블록->인라인 변환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스가로길이늘리기</title>
<style>
    div {
        width: 100px;
        height: 100px;
        background: yellow;
        border: 1px solid red;
        transition: width 2s;
    }
    /* 트렌지션 효과 시간(초) */
    div:hover {
        width: 300px;
    }
</style>
</head>
<body>
<div>마우스를 올리면 박스가 늘어납니다</div>    
</body>
</html>

인라인->블록 변환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul.in li {
            display: inline;
            background-color: yellow;
            border: 1px solid;
            border-color: blue;
            margin: 3px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h4>[블록형식]</h4>
    <ul>
        <li><a href="http://www.google.com">google</a></li>
        <li><a href="http://www.apple.com">apple</a></li>
        <li><a href="http://www.oracle.com">oracle</a></li>
    </ul>
    <h4>[인라인형식으로변환후]</h4>
    <ul class="in">
        <li><a href="http://www.google.com">google</a></li>
        <li><a href="http://www.apple.com">apple</a></li>
        <li><a href="http://www.oracle.com">oracle</a></li>
    </ul>
</body>
</html>

4. 백그라운드속성(그레디언트효과)

선형그레이디언트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>선형그라디언트</title>
<style>
    #grad1{
height: 70px;
background: red;
background: linear-gradient(270deg, red, yellow);
}
/* to left */
   #grad2{
height: 70px;
background: red;
background: linear-gradient(red, yellow, green);
    }
    /* to top */
   #grad3{
height: 70px;
background: red;
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
    }
/* to top */
  #grad4{
height: 70px;
background: red;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }
/* to left: 270deg */
</style>
</head>
<body>
    <h4>2색 선형 그라디언트</h4>
    <div id="grad1"></div>
    <h4>3색 선형 그라디언트</h4>
    <div id="grad2"></div>
    <h4>7색 선형 그라디언트</h4>
    <div id="grad3"></div>
    <h4>2색 선형 그라디언트(to rignt)</h4>
    <div id="grad4"></div>
    <p><strong>참고:</strong>최신브라우저를 사용해주세요</p>
</body>
</html>

원형그레이디언트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>원형그라디언트</title>
<style>
    #grad1{
height: 70px;
background: red;
background: radial-gradient(yellow,green);
}

   #grad2{
height: 70px;
background: red;
background: radial-gradient(red, yellow, green);
    }

   #grad3{
height: 70px;
background: red;
background: radial-gradient(red 5%, yellow 15%, green 60%);
    }

  #grad4{
height: 100px;
width: 150px;
background: red;
background: radial-gradient(circle, red, yellow, green);
    }

</style>
</head>
<body>
    <h4>기본 2색 원형 그라디언트</h4>
    <div id="grad1"></div>
    <h4>3색 원형 그라디언트</h4>
    <div id="grad2"></div>
    <h4>색상 영역지정 (%단위) 원형 그라디언트</h4>
    <div id="grad3"></div>
    <h4>원형 모양지정 그라디언트(eclipse, circle)</h4>
    <div id="grad4"></div>
    <p><strong>참고:</strong>최신브라우저를 사용해주세요</p>
</body>
</html>

2차원 변환 효과

1. 2차원변환함수

평행이동변환 translate()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>평행이동변환하기</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            border: 1px dotted black;
            background-color: yellow;
        }
        div#box2 {
            transform: translate(100px, 50px);
        }
    </style>
</head>
<body>
    <div id="box1"> 박스 1 </div>
    <div id="box2"> 박스 2 </div>
</body>
</html>

회전변환 rotate()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회전변환하기</title>
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px dotted black;
        background-color: lightgreen;
        margin:30px;
    }
    div#box1{
        transform: rotate(45deg);
    }
    div#box2{
        transform: rotate(-90deg);
    }
</style>
</head>
<body>
    <div>기본박스(0deg)</div>
    <div id="box1">박스1(45deg)</div>
    <div id="box2">박스2(-90deg)</div>
</body>
</html>

크기변환 scale()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>크기변환하기</title>
    <style>
    div{
        width: 100px;
        height: 100px;
        border: 1px dotted black;
        background-color: skyblue;
        margin:50px;
    }
    div#box1{
        transform: scale(0.5, 0.5);
    }
    div#box2{
        transform: scale(2, 1.5);
    }
    </style>
</head>
<body>
    <div>기본박스</div>
    <div id="box1">박스1(0.5배 축소)</div>
    <div id="box2">박스2(가로2배, 세로1.5배 확대)</div>
</body>
</html>

기울기변환 skewX() skewY()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기울기변환하기</title>
    <style>
    div{
        width: 100px;
        height: 100px;
        border: 1px dotted black;
        background-color: lightgreen;
        margin:50px;
    }
    div#box1{
        transform: skewX(50deg);
    }
    div#box2{
        transform: skewY(-30deg);
    }
    div#box3{
        transform: skew(20deg, 10deg);
    }
    </style>
</head>
<body>
    <div>기본박스</div>
    <div id="box1">박스1 (x축으로 50deg)</div>
    <div id="box2">박스2 (y축으로 -30deg)</div>
    <div id="box3">박스2 (x,y축으로 20,10deg)</div>   
</body>
</html>

2차원행렬구조변환 matrix(n,n,n,n,n,n)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2차원행렬구조변환하기</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: silver;
            text-align: center;
        }
        div#box1{
            transform: matrix(1, 0, 0, 1, 100, 0);
        }
        div#box2{
            transform: matrix(1, 1, -1, 1, 50, 50);
        }
        div#box3{
            transform: matrix(1, 0, 1, 1, 50, 100);
        }
        div#box4{
            transform: matrix(1, 2, 2, 1, 50, 150);
        }
        /* 이 메소드는 2D 변형(transform)과 관련된 6개의 매개변수를 가집니다.
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());*/
        
        /* 괄호안에 쉼표 다음 스페이스(여백)이 들어가지 않으면 안됌 */
        </style>
    </head>
    <body>
        
        <div>기본박스</div>
        <div id="box1">박스1</div>
        <div id="box2">박스2</div>
        <div id="box3">박스3</div>   
        <div id="box4">박스4</div>   
        
    </body>
    </html>

혼합변환하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>혼합변환하기1</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: silver;
            text-align: center;
        }
        div#box1{
            transform:
            rotate(45deg) scale(1.5) skew(30deg) 
            translate(50px);
        }
        div#box2{
            transform:  
            translate(200px) rotate(-90deg)
            scale(2);
        }
        </style>
    </head>
    <body>
        
        <div>기본박스</div>
        <div id="box1">박스1</div>
        <div id="box2">박스2</div>
        
    </body>
    </html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>혼합변환하기2</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: yellow;
        }
        .c1:hover{
            transform-origin: 50% 50% 0px;
            transform: translate(0px, 0px)
            rotate(-45deg); scale(0.7);
            background: green;
        }
        /* CSS 속성은 요소 변형의 원점을 설정합니다 .transform-origin */
        </style>
    </head>
    <body>
        
        <div class="c1">박스안에 마우스를 올리면 
            무엇이 보일까요?
        </div>
        
    </body>
    </html>

3차원 변환 효과

1. 3차원변환함수

X Y Z 축 z축은 깊이

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3차원변환함수</title>
    <!-- z축은 깊이 -->
    <style>
        div{
    background-color: green;
    height: 150px;
    width: 150px;
        }
        .container{
    background-color: white;
    border: 1px solid black;
        }
     .transformed:hover{
         backface-visibility: visible;
         transform-origin: 50% 42%;
         transform: perspective(500px)
         /* prespective3차원관점변환(depth)*/
         rotateY(50deg)
         rotateX(0deg);
         /* rotateX
         가로축을 중심으로 요소를 회전
         rotateY
         세로축을 중심으로 요소를 회전*/
     }
     .transformed2:hover{
         backface-visibility: visible;
         transform-origin: 50% 42%;
         transform: perspective(500px)
         rotateY(0deg)
         rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="transformed">박스1</div>
    </div>
     <p></p>
     <div class="container">
        <div class="transformed2">박스2</div>
</body>
</html>

변화효과

1.변화속성

박스가로길이늘리기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스가로길이늘리기</title>
<style>
    div {
        width: 100px;
        height: 100px;
        background: yellow;
        border: 1px solid red;
        transition: width 2s;
    }
    /* 트렌지션 효과 시간(초) */
    div:hover {
        width: 300px;
    }
</style>
</head>
<body>
<div>마우스를 올리면 박스가 늘어납니다</div>    
</body>
</html>

박스를회전시키며 크기와테두리색상 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스를회전시키며 크기와테두리색상변경</title>
<style>
    div {
        margin: 50px;
        width: 100px;
        height: 100px;
        background: yellow;
        border: 1px solid red;
        transition: width 3s,
        height 3s,
        border 3s,
        transform 3s;
    }
    div:hover{
        width: 200px;
        height: 200px;
        border: 3px solid blue;
        transform: rotate(360deg);
    }

</style>
</head>
<body>
    <div>마우스를 올리면 박스가 회전하며 커진다</div>
</body>
</html>

2. transition-property속성

변환 효과 대상지정

마우스 올리면 여러속성이 변함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-property속성</title>
    <!-- 변화효과를 적용할 속성들 나열 -->
    <style>
        div{
            width: 100px;
            height: 100px;
            background: orange;
            transition-property: 
            width, background, color;
        }
        div:hover{
            width: 400px;
            background: blue;
            color: white;
        }
    </style>
</head>
<body>
    <div>마우스를 올리면 여러속성이 변함</div>
</body>
</html>

3. transition-duration속성

변환 효과 지속시간 설정

색상이 10초동안 서서히 변함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-duration속성</title>
    <!-- 변화가 지속되는 시간지정 -->
    <style>
        div{
            width: 280px;
            height: 100px;
            background: orange;
            transition: background;
            transition-duration: 10s;
        }

        div:hover {
            background: blue;
        }
    </style>
</head>
<body>
    <div>색상이 10초동안 서서히 변함</div>
</body>
</html>

4. transition-timing-function속성

linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier

변환 효과 타이밍 설정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-timing-function 속성</title>
<!-- 변화효과의 타이밍설정하기  -->
<style>
div {
    width: 100px;
    height: 50px;
    background: red;
    color : yellow;
    border: 1px solid black;
    transition: width 3s
}
#div1 {transition-timing-function : linear; }
#div2 {transition-timing-function : ease; }
#div3 {transition-timing-function : ease-in; }
#div4 {transition-timing-function : ease-out; }
#div5 {transition-timing-function : ease-in-out; }
#div6 {transition-timing-function : 
    cubic-bezier(0.1, 0.0, 0.1, 1.0); }
div:hover {width: 400px;}
</style>
</head>
<body>
    <div id="div" style="top:100px"> linear</div>
    <div id="div" style="top:150px"> ease</div>
    <div id="div" style="top:200px"> ease-in</div>
    <div id="div" style="top:250px"> ease-out</div>
    <div id="div" style="top:300px"> ease-in-out</div>
    <div id="div" style="top:350px"> cubic-bezier</div>
<p>lineaer: 처음부터 끝까지 같은속도 <br>
    ease: 느리게 시작하여 점점 빨라졌다 느리게 끝남 <br>
    ease-in: 느리게 시작하여 점점빨라지다 일정속도에 다다르면 같은속도유지 <br>
    ease-out: 일정한속도의 등속변화로 시작해서 점점 느려지면서 끝남 <br>
    ease-in-out: 느리게 시작하여 느리게 끝남 <br>
    cubic-bezier(n, n, n, n): 처음과 끝의 속도를 설정  <br>
</p>
</body>
</html>

5. transition-delay속성

변환 효과 지연시간 설정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-delay 속성1</title>
<!-- 변화효과의 지연시간 설정하기  -->
<style>
div {
    margin: 50px;
    width: 200px;
    height: 200px;
    background: yellow;
    border: 5px solid black;
    transition-duration:5s;
    /* 변화가 지속되는시간지정 :transition-duration */
    transition-delay: 3s;
}
div:hover { transform: rotate(180deg);}
</style>
</head>
<body>
    <div> 마우스 올리고 3초 후에 박스가 180도 회전</div>
</body>
</html>

홈페이지 메뉴 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>홈페이지메뉴만들기</title>
<style>
a {
    text-decoration: none;
    color: white
}
div {
    position: absolute;
    left: 0px;
    width: 80px;
    height: 50px;
    background: #ff8080;
    border: 1px solid red;
    transition-property: width background;
    /* transition-property: 변화효과를 적용할 속성들 나열 */
    transition-duration:2s;
    /* 변화가 지속되는시간지정 :transition-duration */
}
div:hover {
    width: 200px;
    transition-timing-function: linear;
    /*  변화효과의 타이밍설정하기  */
    background: #ff0000;
    color: white;
    text-align: center;
    font-size: 30px;
}
</style>
</head>
<body>
    <div style="top:50px">
    <a href="#" target="new">HOME</a></div>
    <div style="top:100px">
        <a href="#" target="new">ABOUT</a></div>
        <div style="top:150px">
            <a href="#" target="new">NEWS</a></div>
            <div style="top:200px">
                <a href="#" target="new">STUDY</a></div>
                <div style="top:250px">
                    <a href="#" target="new">CONTACT</a></div>
</body>
</html>

애니메이션의 원리

1. 애니메이션의원리

2. 애니메이션속성

무한반복하며 좌우로 이동하는 박스만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>무한반복하며 좌우로 이동하는 박스만들기</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: boxmove 5s linear infinite alternate;
        }
        /* alternate : 애니메이션이 양방향으로 재생된다 */
        @keyframes boxmove {
            from {left: 0px;}
            to {left: 300px;}
        }
        /* @keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 
        CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. */
    </style>
</head>
<body>
    <div>애니메이션박스</div>
    <p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
</body>
</html>

3. animation-delay속성

웹문서가 로드된후 일정시간 후 애니메이션 시작하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-delay속성</title>
   <style>
       div {
width: 100px;
height: 50px;
background: red;
position: relative;
animation: boxmove 5s linear infinite alternate;
       }
       #box1 {
           animation-delay: 3s;
       }
       #box2 {
           animation-delay: 5s;
       }
       @keyframes boxmove {
from {left: 0px;}
to {left: 300px;}           
       }
   </style>  
</head>
<body>
    <div id="box1"> 애니메이션박스1 </div>
    <div id="box2"> 애니메이션박스2 </div>
    <p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
</body>
</html>

4. ainmation-direction속성

nomal / reverse / alternate / alternate-reverse

애니메이션의 진행방향 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-direction 속성</title>
    <style>
        div {
width: 100px;
height: 50px;
background: red;
position: relative;
animation: boxmove 5s linear infinite;
       }
       #box1 {
           animation-delay: 3s;
           animation-direction: reverse;
           /* 애니메이션이 역방향으로 재생 */
       }
       #box2 {
           animation-delay: 5s;
           animation-direction: alternate-reverse;
       }
       /* 애니메이션이 양방향(역)으로 재생된다 */
       @keyframes boxmove {
from {left: 0px;}
to {left: 300px;}           
       }
    </style>
</head>
<body>
    <div id="box1"> 애니메이션박스1 </div>
    <div id="box2"> 애니메이션박스2 </div>
    <p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
</body>
</html>

5. animation-iteration-count속성

애니메이션의 반복 횟수 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-iteration-count 속성</title>
<style>
        div {
width: 100px;
height: 50px;
background: red;
position: relative;
animation: boxmove 5s;
       }
       #box1 {
           animation-delay: 3s;
           animation-direction: reverse;
           /* 애니메이션이 역방향으로 재생 */
           animation-iteration-count: 2;
           /* 애니메이션이 반복 재생되는 횟수설정 */
       }
       #box2 {
           animation-delay: 5s;
           animation-direction: alternate-reverse;
           animation-iteration-count: 5; 
        }
       @keyframes boxmove {
from {left: 0px;}
to {left: 300px;}           
       }
</style>
</head>
<body>
    <div id="box1"> 애니메이션박스1 </div>
    <div id="box2"> 애니메이션박스2 </div>
    <p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
</body>
</html>

6. animation-timing-function속성

애니메이션의 타이밍 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-timing-function 속성</title>
    <style>
        div {
width: 100px;
height: 50px;
background: red;
position: relative;
animation: boxmove 5s alternate;
       }
       #box1 {
           animation-delay: 1s;
           animation-iteration-count: 2;
            animation-timing-function: ease;
            /* 애니메이션의 시작과 끝 타이밍지정 */
       }
       #box2 {
        animation-delay: 2s;
           animation-iteration-count: 3;
            animation-timing-function: linear;
            /* 애니메이션의 시작과 끝 타이밍지정 */
        }
        #box3 {
        animation-delay: 3s;
           animation-iteration-count: 3;
            animation-timing-function: ease-out;
            /* 애니메이션의 시작과 끝 타이밍지정 */
        }
       @keyframes boxmove {
from {left: 0px;}
to {left: 300px;}           
       }
</style>
</head>
<body>
    <div id="box1"> 애니메이션박스1 ease </div>
    <div id="box2"> 애니메이션박스2 linear</div>
    <div id="box3"> 애니메이션박스3 ease-out</div>
    <p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
    <p>lineaer: 처음부터 끝까지 같은속도 <br>
        ease: 느리게 시작하여 점점 빨라졌다 느리게 끝남 <br>
        ease-out: 일정한속도의 등속변화로 시작해서 점점 느려지면서 끝남 <br>
    </p>

</body>
</body>
</html>

7. animation-play-state속성

paused / running

마우스 올리면 멈추게 하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-play-state 속성1</title>
    <!-- 마우스올리면 멈추게 하기 -->
<style>
        div {
width: 100px;
height: 50px;
background: red;
position: relative;
animation: boxmove 5s infinite alternate;
       }
       #box1 {
           animation-delay: 1s;
            animation-timing-function: ease;
            /* 애니메이션의 시작과 끝 타이밍지정 */
       }
       #box2 {
        animation-delay: 2s;
            animation-timing-function: linear;
            /* 애니메이션의 시작과 끝 타이밍지정 */
        }
        #box3 {
        animation-delay: 3s;
            animation-timing-function: ease-out;
            /* 애니메이션의 시작과 끝 타이밍지정 */
        }
    @keyframes boxmove {
        from { left : 0px;}
        to { left : 300px;}
    }
    div:hover {
        animation-play-state: paused;
    }
    /* 애니메이션일시정지 */
</style>
</head>
<body>
    <div id="box1"> 애니메이션박스1 ease </div>
    <div id="box2"> 애니메이션박스2 linear</div>
    <div id="box3"> 애니메이션박스3 ease-out</div>
<p> 마우스를 올리면 멈춤</p>    
    <p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
</body>
</html>

커튼을 치고 걷어내는 듯한 효과 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-play-state 속성2</title>
    <!-- 커튼을 치고 걷어내는 듯한 효과만들기 -->
<style>
        div {
width: 100px;
height: 100px;
position: absolute;
animation-duration: 5s;
animation-timing-function: linear;
/* lineer: 처음부터 끝까지 같은속 */
animation-delay: 2s;
animation-iteration-count: infinite;
animation-play-state: running;
/* 애니메이션을 재생한다 */
       }
       #div1 {
    background-color: blue;
    animation-direction: nomal;
    /* 순방향으로 재생 : 기본값*/
    animation-name: L-box;
       }
       #div2 {
        background-color: yellow;
    animation-direction: reverse;
    animation-name: R-box;
        }
@keyframes L-box {
    0% {left: 0px;}
    50% {left: 200px;}
    100% {left: 0px;}
}
@keyframes R-box {
    0% {left: 400px;}
    50% {left: 200px;}
    100% {left: 400px;}
}
</style>
</head>
<body>
    <div id="div1"> 왼쪽박스</div>
    <div id="div2"> 오른쪽박스</div>
</body>
</html>

상하좌우로 움직이면서 색상 변하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-play-state 속성3</title>
    <!-- 상하좌우로 움직이면서 색상변경 -->
<style>
        div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: colorbox 5s infinite;
animation-direction: alternate;
       }
@keyframes colorbox {
from {background: red;  left: 0px;  top: 0px;}
25% {background: orange;  left: 300px;  top: 0px;}
50% {background: yellow;  left: 300px;  top: 300px;}
75% {background: green;  left: 0px;  top: 300px;}
to {background: red;  left: 0px;  top: 0px;}
}
</style>
</head>

<body>
<div></div>
</body>
</html>

점핑볼 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-play-state 속성4</title>
    <!-- 점핑볼 만들기-->
<style>
@keyframes bounce {
from, to {
    bottom: 0px;
    animation-timing-function:ease-out;
}
/* ease-out: 일정한속도의 
등속변화로 시작해서 점점 느려지면서 끝남  */
50% {
    bottom: 200px;
    animation-timing-function:ease-in;
}
    /* ease-in: 느리게 시작하여 점점빨라지다 
    일정속도에 다다르면 같은속도유지 */
}

div {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
animation-name: bounce;
animation-iteration-count: infinite;
       }
#b1 {
    left: 10px;
    background: red;
    animation-duration: 5s;
}
#b2 {
    left: 50px;
    background: blue;
    animation-duration: 10s;
}
#b3 {
    left: 90px;
    background: green;
    animation-duration: 3s;
}
#b4 {
    left: 130px;
    background: silver
    animation-duration: 8s;
}
#b5 {
    left: 170px;
    background: black;
    animation-duration: 1s;
}
</style>
</head>

<body>
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="b5"></div>
</body>
</html>

이미지 출처 : IT CookBook 한빛 모던웹을 위한 HTML5+CSS3 바이블

728x90

저작자표시 비영리 변경금지

'STUDY > HTML5 CSS3' 카테고리의 다른 글

[HTML CSS] 22-05-23 UI 레이아웃 / 미디어 쿼리 ☑ (0)	2022.06.02
[CSS] 22-05-23 CSS 그리드 grid ☑ (0)	2022.06.02
[HTML] 입력양식태그 공간분할태그 ☑ (0)	2022.06.02
[HTML] 기본태그와 멀티미디어 태그 ☑ (0)	2022.06.02
[HTML CSS] 22-05-20 게시판 만들기 ☑ (0)	2022.06.02

'STUDY > HTML5 CSS3' 카테고리의 다른 글

티스토리툴바