Notice
«   2025/08   »
일 월 화 수 목 금 토
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. 11. 15:49 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS - animation</title>
    <link rel="stylesheet" href="./attr7.css">
</head>
<body>
    <div class="box"></div>
    <div class="ball1"></div>
    <div class="ball2"></div>

</body>
</html>

html 코드

 

/*
    transition vs animation
    - transition
        - 전환된 스타일을 지정할 수 있음
        - hover나 onclick 같은 "이벤트"에 의해 발생
    - animation
        - 중간 스탭을 지정해 보다 세밀한 스타일 전환 가능
        - 시작, 반복, 정지 동작 가능
        - @keyframes로 이루어짐
*/

.box{
    width: 100px;
    height:100px;
    background-color: cyan;
    position: relative;
    animation-name: my-ani;
    animation-duration: 5s;
    animation-iteration-count: 1.7;
    /*infinite = 무한히 사용 가능*/
    animation-iteration-count: infinite;
    /*등속 운동*/
    animation-timing-function: linear;
    /*느리게 시작하다가 점점 빨라짐*/
    /*animation-timing-function: ease;*/
    /*점점 느려짐*/
    /*animation-timing-function: ease-out;*/
    /*느려졌다가 빨라졌다가 느려졌다가*/
    /*animation-timing-function: ease-in-out;*/
    animation-delay: 2s;
}
/*
    animation
    - animation-name: @keyframes로 만들어준 애니메이션 이름 지정(필수)!!
    - animation-duration: 한 사이클의 애니메이션이 얼마에 걸쳐 일어날지 지정(단위: s) (필수)!!
    - animation-delay: 요소가 로드된 후 언제 애니메이션이 시작될 지 지정(단위: s)
    - animation-iteration-count: 애니메이션 반복횟수 (default:1)
    - animation-timing-fuction: 어떤 시간간격으로 애니메이션을 진행할지 설정
        -> ease(default), liner, ease-in, ease-in-out, ease-out
    - animation-direction: 애니매이션이 반복될 때 진행방향 지정
        -> nomal, reverse, alterate, alternate-reverse
*/

@keyframes my-ani{
    0%{
        left: 0px;
    }

    25%{
        left: 200px;
    }

    50%{
        left: 400px;
    }

    75%{
        left: 200px;
    }

    100%{
        left: 0px;
    }
}

.ball1{
    position: relative;
    left:100px;
    top:0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: black;
    /*animation-name: bounce1;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate;*/
    animation: bounce1 1s ease-out 0s infinite alternate;
}

@keyframes bounce1{
    from{
        top:300px;
    }

    to{
        top:0px;
    }
}
.ball2{
    width: 50px;
    height: 50px;
    background-color: tomato;
    position: absolute;
    border-radius: 50%;

    /*animation-name: bounce2;
    animation-duration: 2s;
    animation-iteration-count: infinite;*/
    animation: bounce2 2s infinite;
}

@keyframes bounce2{
    0%, 100%{
        bottom: 0;
        width: 55px;
        animation-timing-function: ease-out;
    }

    50%{
        bottom:300px;
        background-color: black;
        animation-timing-function: ease-in;
    }
}

css 코드

 

코드 실행 시 결과창 (png 파일이라 애니메이션 효과가 보이지않아 아쉽다..)

저작자표시 비영리 변경금지 (새창열림)

'CSS' 카테고리의 다른 글

[css] selector 선택자1 - 기본 선택자  (0) 2024.01.12
[css] css 적용 방법  (0) 2024.01.11
[css] transform & transition  (0) 2024.01.11
[css] display:flex  (2) 2024.01.11
[css] background 속성  (0) 2024.01.11
'CSS' Related Articles more