개발자의 여정에 열정을 더하다.

Class/css

[ CSS애니메이션 / Animation1-1 ]

열정코딩 2022. 4. 4.

목차

< Animation1-1 강의 용어 정리>
width = 넓이
height= 높이
background = 색상
border = 테두리 solid= 입체
display flex = 중앙정렬
align-items = 플렉스 요소들의 수직 방향 정령 방식을 설정
justify-content = 플렉스 료소의 수평 방향 정렬 방식을 설정하는것
Keyframe = 애니메이션이 변하는 지점, 방향이 변하는 지점
( # 트렌지션은 중간에 변할수 있는 값이 없었다.)

 

----------------------------------------------------------------

 

<예제 1>
1. 박스를 한개 만들어 주자 단, 박스색은 노란색 , 테두리는 검정색으로
2. 박스안 센터에 box 라는 단어를 넣어주자

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Interactive Web</title>
    <style>
    .box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            border: 2px solid #000;
            background: #fff000;
            animation: sample-ani 2s linear 3;
        }
    </style>
</head>
<body>
    <h1>Animation</h1>
    <div class="box">BOX</div>
</body>
</html>

 

[ CSS애니메이션 / Animation1-1 ]

<예제 2>

1. 박스에 에니메이션을 넣어보자
2. 노란 박스를 이동해 보도록 하자.

<풀이방식>
@keyframe 으로 애니메이션을 넣어준다. 옆에 프레임의 이름 사용자 방식으로 넣어준다.
0% - 50% - 100% 각각의 움직이는 이동지점 퍼센트를 넣어준다.
각각의 퍼센트 안에 transform 움직일 방향 ( x . y )를 정해준다.
.box 안에 만든 에니메이션 을 넣고 사용자 지정 프레임 이름을 넣어준다 .

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Interactive Web</title>
    <style>
        @keyframes sample-ani {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(300px, 0);
            }
            100% {
                transform: translate(400px, 500px);
            }

 

<예제3>
1. 애니메이션을 계속 반복 하고 싶으면box 안 animation 옆에 linear infinite 를 입력한다. 무한 반복

.box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            border: 2px solid #000;
            background: #fff000;
            animation: sample-ani 3s linear infinite;
        }

 

<예제 4>
다른 방식으로도 모양을 자유롭게 움직여 보자

1.linear infiniti > linear 3 : 무한반복에서 3번반복으로 바꾸기

2. 박스 색상 변하게 하기

- 키프레임 안에서 자유롭게 변하게 할수 있다 중간에서 색상을 red 로 변하게 하기

 50% {
                transform: translate(300px, 0);
                background: red;
            }

 

'Class > css' 카테고리의 다른 글

[ CSS변환 / Transfrom 1-2 ]  (0) 2022.03.30
[ CSS변환 / Transfrom 1-1]  (0) 2022.03.30

댓글

티스토리툴바