Notice
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
관리 메뉴

Jade_o.o

[css] animation 실습 - 공 움직이기 본문

CSS

[css] animation 실습 - 공 움직이기

by jade 2024. 1. 13. 13:30

공이 직사각형 방향으로 시계 방향으로 반복해서 움직이게 해보자

@keyframes 활용,

 animation-direction: alternate;
    0~100%에서 다시 100%~0%d으로 돌아가라는 뜻
    사용 시 동그랗게 무한히 반복하지 않고 갔다가 돌아옴 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습 - animation 실습(공 움직이기)</title>
    <link rel="stylesheet" href="./css_test19.css">
</head>
<body>
    <div class="continer">
        <div class="ball"></div>
    </div>
</body>
</html>

html 코드

 

.continer{
    width: 700px;
    height: 500px;
    position: relative;
}

.ball{
    width:100px;
    height: 100px;
    border-radius: 50%;
    background-color: yellowgreen;
    position: absolute;

    animation-name: round1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    /*animation-direction: alternate;*/
    /*0~100%에서 다시 100%~0%d으로 돌아가라는 뜻
    사용 시 동그랗게 무한히 반복하지 않고 갔다가 돌아옴*/
}

@keyframes round1{
    0%, 100%{
        top: 0%;
        left:0px;
    }
    25%{
        top: 0%;
        left: 600px;
    }
    50%{
        top:400px;
        left:600px;
    }
    75%{
        top:400px;
        left:0px
    }

}

css 코드

 

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

'CSS' 카테고리의 다른 글

[css] animation 실습2 - 문장 움직이기  (0) 2024.01.13
[css] transform 실습 - 함수 여러개 사용  (0) 2024.01.13
[css] transition & transform 실습 - 이미지 연달아 나열하기  (1) 2024.01.13
[css] 종합실습 - 오버워치 캐릭터창 만들기(background&flex)  (0) 2024.01.13
[css] background 실습 - 프로필 만들기  (1) 2024.01.13
'CSS' Related Articles more