HTML5 & CSS3 : animation 속성

ㆍStudy/HTML5 & CSS3

2022.11.07.

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 37



Review

 transition 속성도 아직 완벽히 숙지되지 않았는데 오늘은 animation 속성을 배웠다.
animation-duration은 얼마나 줘야할지, delay는 얼마나 줘야할지 헤롱헤롱하다.
계속 하다보면 익숙해지겠지...

 

너무 헷갈리긴 하지만 요즘 하는 예제들을 실행하면서 내가 앱이나 웹 사이트를 이용할

때마다 예쁘다고 생각했던 것들을 이제는 내가 해볼 수 있지 않을까 상상한다.

내가 하고자 했던 것들에 조금씩 가까워지고 있는 것 같다.

 

포토샵을 할 때도 재밌었지만 아무래도 나는 코딩이 더 내 적성에 맞는 것 같다.

어렵긴 해도 문제가 해결되면 뿌듯하고 눈에 보이면 예쁘니 더 욕심내게 된다.

 

공부를 끝내고 일을 하러 가면 체력이 거의 소진되어 도착하는데,

원장님께서 내가 맨날 힘이 없어보여 내일은 필라테스 수업을 듣게 해준다고 하셨다.

일도 하고 운동도 시켜주시고 나는 항상 감사한 마음으로 일해야할 것 같다.

보답할 수 있는 건 요령 피우지 않고 성실하게 일하는 것이니까 내가 더 힘을 내야겠다.

 

파이팅 - ! 

 

 

 

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 37

 

 

선생님께서 animation 속성 이론에 대해 pdf 파일로 정리해주셨다.

중간중간 헷갈려서 참고하며 공부했다.

 

 

 

 

<animation 속성 예제>

 

 

- HTML

 

<!DOCTYPE html>
<html lang="ko">
<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">
    <link rel="stylesheet" href="../1107/06style.css">
    <title>animation</title>
</head>
<body>
    <input type="radio" name="btn" id="left">
    <input type="radio" name="btn" id="right">
    <input type="radio" name="btn" id="off">
    <ul class="box">
        <li class="pipe"></li>
        <li class="propeller"></li>
    </ul>
    <ul class="btn_box">
        <li><label for="left">turn left</label></li>
        <li><label for="right">turn right</label></li>
        <li><label for="off">off</label></li>
    </ul>
</body>
</html>

 

 

 

- CSS

 

@charset "utf-8";
@font-face {
    font-family: opensans;
    src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
@font-face {
    font-family: notosansKR;
    src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff) format("woff");
}
* {
    padding: 0;
    margin: 0;
}
body {
    font: 1em opensans, notosansKR;
    color: #202124;
}
ul {
    list-style: none;
}
input[type=radio] {
    display: none;
}
ul.box {
    position: relative;
    width: 500px;
    height: 600px;
    margin: 0 auto;
}
ul.box li {
    position: absolute;
    width: 500px;
    height: 500px;
}
.pipe {
    background: url(../../images/pipe.png);
}
.propeller {
    background: url(../../images/propeller.png);
}
ul.btn_box {
    display: flex;
    justify-content: space-around;
    width: 500px;
    margin: 0 auto;
}
ul.btn_box li label {
    display: block;
    cursor: pointer;
    border: 1px solid #202124;
    padding: 10px 20px;
    border-radius: 20px;
}
#left:checked ~ ul.btn_box li:first-child label,
#right:checked ~ ul.btn_box li:nth-child(2) label,
#off:checked ~ ul.btn_box li:last-child label {
    background-color: black;
    color: white;
}
@keyframes left {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-1080deg)}
}
@keyframes right {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(1080deg)}
}
#left:checked ~ ul.box .propeller {
    animation: left 2s linear infinite;
}
#right:checked ~ ul.box .propeller {
    animation: right 2s linear infinite;
}
#off:checked ~ ul.box .propeller {
    animation-play-state: paused;
}

 

 

0
예제 완성

 

turn left를 누르면 시계 반대 방향으로 3바퀴 돌도록 음의 값인 -1080deg로 설정하고,

turn right를 누르면 시계 방향으로 3바퀴 돌도록 양의 값인 1080deg로 설정했다.

off는 paused로 설정해 누르면 애니메이션이 중단된다.

 

귀여운 예제였당-

 

 

<animation 속성 예제2>

 

- HTML

 

<!DOCTYPE html>
<html lang="ko">
<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">
    <link rel="stylesheet" href="../1107/06style.css">
    <title>animation</title>
</head>
<body>
    <input type="radio" name="btn" id="left">
    <input type="radio" name="btn" id="right">
    <input type="radio" name="btn" id="off">
    <ul class="box">
        <li class="pipe"></li>
        <li class="propeller"></li>
    </ul>
    <ul class="btn_box">
        <li><label for="left">turn left</label></li>
        <li><label for="right">turn right</label></li>
        <li><label for="off">off</label></li>
    </ul>
</body>
</html>

 

 

 

 

- CSS

 

@charset "utf-8";
@font-face {
    font-family: opensans;
    src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
@font-face {
    font-family: notosansKR;
    src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff) format("woff");
}
* {
    padding: 0;
    margin: 0;
}
body {
    font: 1em opensans, notosansKR;
    color: #202124;
    background-color: #202124;
}
ul {
    list-style: none;
}
input[type=radio] {
    display: none;
}
ul.box {
    width: 600px;
    height: 300px;
    margin: 0 auto;
}
.arrow {
    position: relative;
    top: 250px;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid transparent;
    border-left: 10px solid #fff;
    animation: move 0.5s linear alternate infinite;
}
ul.btn_box {
    display: flex;
    justify-content: space-around;
    width: 200px;
    margin: 0 auto;
}
ul.btn_box li label {
    display: block;
    cursor: pointer;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 20px;
}
#start:checked ~ ul.btn_box li:first-child label,
#stop:checked ~ ul.btn_box li:last-child label {
    background: #fff;
    color: #202124;
}
@keyframes move {
    0% {left: -5px;}
    100% {left: 5px;}
}
#stop:checked ~ ul.box .arrow {
    animation-play-state: paused;
}

 

 

0
예제 완성

 

위의 예제처럼 radio 버튼은 input 태그를 이용해 전반적으로 비슷한 예제이다.

좌/우를 왔다갔다 하는 것처럼 보이도록 .arrow에서 position: relative;를 설정해놓고,

@keyframes에서 left를 통해 움직임을 설정했다.

 

 

 

<:hover 상태에서 animation 속성 예제>

 

- HTML

 

<!DOCTYPE html>
<html lang="ko">
<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">
    <link rel="stylesheet" href="../1107/08style.css">
    <title>animation</title>
</head>
<body>
    <div class="banner">
        <h1>Basic :: CSS3 Animation</h1>
        <ul>
            <li><div class="div1">마우스를 올리면 색상이 변경됩니다.</div></li>
            <li><div class="div2">애니메이션은 여러 단계를 통한 변환 효과도 가능합니다.</div></li>
        </ul>
    </div>
</body>
</html>

 

 

- CSS

 

@charset "utf-8";
@font-face {
    font-family: opensans;
    src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
@font-face {
    font-family: notosansKR;
    src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff) format("woff");
}
* {
    padding: 0;
    margin: 0;
}
body {
    font: 1em opensans, notosansKR;
    background: #202124;
    color: #fff;
    margin: 20px;
    padding: 20px;
}
ul {
    list-style: none;
}
h1 {
    text-align: center;
    margin-bottom: 20px;
}
.banner ul li {
    cursor: pointer;
}
.banner ul li div {
    width: 500px;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    padding: 20px 30px;
    background: rgb(255, 109, 109);
    border-radius: 30px;
    color: #fff;
    margin-bottom: 30px;
    font-size: 20px;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.3),
                inset 0 0 10px rgba(255,255,255,0.5),
                inset 0 0 50px rgba(255,255,255,0.5);
}
@keyframes change1 {
    0% {background: rgb(255, 109, 109);}
    100% {background: rgb(255, 236, 109); color: #202124;}
}
.banner ul li .div1:hover {
    animation: change1 2s infinite;
}
@keyframes change2 {
    0% {background: rgb(255, 109, 109);}
    20% {background: #46d5d7;}
    50% {background: #ff7d03;}
    75% {background: rgb(255, 236, 109); color: #202124;}
    100% {background: rgb(255, 109, 109);}
}
.banner ul li .div2:hover {
    animation: change2 2s infinite alternate;
}

 

0
예제 완성

 

이번에는 input 태그를 이용하지 않고, div 태그를 이용해서 안에 padding도 주고 

box shadow도 적용해 입체적인 버튼처럼 만들었다.

버튼 2개를 @keyframes에서 change1, change2로 나눠 각각 설정했고,

change2에서는 여러가지 색으로 변하는 것으로 보이게 하기 위해 0-100%까지

퍼센트 별로 나누어 각각 색상을 설정했다.

 

 

 

<version 1 : 동적인 배너 만들기 예제>

 

- HTML

 

<!DOCTYPE html>
<html lang="ko">
<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">
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../1107/11style.css">
    <title>animation</title>
</head>
<body>
    <a href="#" class="banner">
        <img src="../../images/banner_logo.png" alt="banner_logo">
        <span>Animation Banner Design<br>웹 폰트를 활용한 스타일</span>
    </a>
</body>
</html>

 

 

 

- CSS

 

@charset "utf-8";
* {
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
}
body {
    font: 1em font-family: 'Nanum Pen Script', cursive;
    background: #202124;
    color: #fff;
}
a.banner {
    position: relative;
    display: block;
    width: 728px;
    height: 176px;
    border: 1px solid #555;
    text-align: center;
    font-family: 'Nanum Pen Script', cursive;
    background: url(../../images/banner_arrow.png) no-repeat -100% 80%,
                url(../../images/banner_photo.png) no-repeat -300px 10px,
                url(../../images/banner_09.png) no-repeat 20px -400px,
                url(../../images/banner_bg.png) no-repeat 0 0;
                transition: all 0.4s ease-in;
}
a.banner:hover {
    background-position: 50% 80%,-40px 10px,20px -30px,0 0;
 }
 a.banner img {
    position: absolute;
    top: 20px;
    left: 300px;
    transition: all 0.4s ease-in;
 }
 a.banner:hover img {
    left: 550px;
 }   
 a.banner span {
    position: absolute;
    display: block;
    opacity: 0;
    left: 200px;
    top: 20px;
    transition: all 0.4s ease-in;
    font-size: 40px;
    color: #fff;
 }
 a.banner:hover span {
    opacity: 1;
 }

 

0
예제 완성

 

 

 

 

<version 2 : 동적인 배너 만들기 예제>

 

- HTML

 

<!DOCTYPE html>
<html lang="ko">
<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">
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../1107/09style.css">
    <title>animation</title>
</head>
<body>
    <a href="#" class="banner">
        <img src="../../images/banner_logo.png" alt="banner_logo">
        <span>Animation Banner Design<br>웹 폰트를 활용한 스타일</span>
    </a>
</body>
</html>

 

 

- CSS

 

@charset "utf-8";
* {
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
}
body {
    font: 1em font-family: 'Nanum Pen Script', cursive;
    background: #202124;
    color: #fff;
}
a.banner {
    position: relative;
    display: block;
    width: 728px;
    height: 176px;
    border: 1px solid #555;
    text-align: center;
    font-family: 'Nanum Pen Script', cursive;
    background: url(../../images/banner_arrow.png) no-repeat -100% 80%,
                url(../../images/banner_photo.png) no-repeat -300px 10px,
                url(../../images/banner_09.png) no-repeat 20px -400px,
                url(../../images/banner_bg.png) no-repeat 0 0;
    animation: ani1 2s ease-in infinite;
}
@keyframes ani1 {
    to {background-position: 50% 80%, -40px 10px, 20px -30px,0 0;}
}
a.banner img {
    position: absolute;
    left: 300px;
    top: 20px;
    animation: ani2 2s ease-in infinite;
}
@keyframes ani2 {
    to {left:550px}
}    
a.banner span {
    position: absolute;
    display: block;
    opacity: 0;
    left:200px;
    top: 35px;
    color: #fff;
    font-size: 40px;
    animation: ani3 2s ease-in infinite;
}
@keyframes ani3 {
    to {opacity: 1;}
}

 

0
예제 완성

 

<version 3 : 동적인 배너 만들기 예제>

 

- HTML

 

<!DOCTYPE html>
<html lang="ko">
<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">
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../1107/10style.css">
    <title>animation</title>
</head>
<body>
    <a href="#" class="banner">
        <img src="../../images/banner_arrow.png" alt="banner_arrow">
        <span>Animation Banner Design<br>웹 폰트를 활용한 스타일</span>
    </a>
</body>
</html>

 

 

 

- CSS

 

@charset "utf-8";
* {
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
}
body {
    font: 1em font-family: 'Nanum Pen Script', cursive;
    background: #202124;
    color: #fff;
}
a.banner {
    position: relative;
    display: block;
    width: 728px;
    height: 176px;
    border: 1px solid #555;
    text-align: center;
    font-family: 'Nanum Pen Script', cursive;
    background: url(../../images/banner_logo.png) no-repeat 300px 20px,
                url(../../images/banner_photo.png) no-repeat -300px 10px,
                url(../../images/banner_09.png) no-repeat 20px -400px,
                url(../../images/banner_bg.png) no-repeat 0 0;
    animation: ani1 1s ease-in forwards;
}
@keyframes ani1 {
    to {background-position: 550px 20px, -40px 10px, 20px -30px,0 0;}
}
a.banner img {
    position: absolute;
    left: 300px;
    top: 130px;
    animation: ani2 1s ease-in infinite;
}
@keyframes ani2 {
    to {left: 350px}
}    
a.banner span {
    position: absolute;
    display: block;
    opacity: 0;
    left:200px;
    top: 35px;
    color: #fff;
    font-size: 40px;
    animation: ani3 1s ease-in forwards;
}
@keyframes ani3 {
    to {opacity: 1;}
}

 

 

0
예제 완성

 

반응형

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

HTML5 & CSS3 : 웹디자인기능사 실기 기출문제 풀이  (0) 2022.11.09
HTML5 & CSS3 : animation 속성 응용  (0) 2022.11.08
HTML5 & CSS3 : Google 메인 페이지 만들기  (0) 2022.11.04
HTML5 & CSS3 : transition 속성 응용 예제  (0) 2022.11.03
[DAY 66] HTML5 & CSS3 : transition 속성 응용  (0) 2022.11.02

관련글

댓글 1

티스토리툴바