css animation 1

animation은 요소에 애니메이션 효과를 주는 속성입니다.

종류	예시
animation-name	@keyframe에 지정된 이름을 설정합니다.
animation-duration	애니메이션이 실행되는 시간을 설정합니다.
animation-timing-function	애니메이션 키프레임 움직임을 설정합니다.
animation-delay	애니메이션이 시작되기 전까지 시간을 설정합니다.
animation-iteration	애니메이션 반복 횟수를 설정합니다.
animation-derection	애니메이션 방향을 설정합니다.
animation-fill-mode	애니메이션 끝나고 난 뒤 어떤 값을 적용할지 설정합니다.
animation-play-state	애니메이션 실행 상태를 설정합니다.

transtion은 요소의 애니메이션 동작 속도에 관련된 설정을 합니다.

transtion : property | durtion | timing-function | delay

종류	예시
transition-property	트렌지션을 적용할 CSS 속성 대상을 설정합니다.
transition-druation	트렌지션 작동시간을 설정합니다.
transition-timing-function	트렌지션 움직임 효과를 설정합니다.
transition-delay	트렌지션이 시작되기 전까지 시간을 설정합니다.

timing-function은 애니메이션의 시간당 속도를 설정합니다.

timing-function의 종류와 예시를 나타낸 표입니다.
종류	예시
linear	일정한 간격으로 설정합니다.
ease	처음에는 서서히 가속하고 마지막 부분에서 급격히 감속합니다.
ease-in	처음에는 천천히 시작하고 마지막에 가속합니다.
ease-out	처음에는 최대 속도로 시작하고 마지막에 감속합니다.
ease-in-out	처음에는 제로 속도로 시작하고, 중간 지점에서 최고 속도로 움직이고, 마지막 부분에서 서서히 감속합니다.
step-start	애니메이션을 시작점에서 설정합니다.
step-end	애니메이션을 끝점에서 설정합니다.
steps(int, start/end)	애니메이션을 단계별을 설정합니다.
cubic-bezier(n,n,n,n)	버지니아 곡선 값을 만들어서 설정합니다.

timing-function에 의해 애니메이션의 속도가 달라지는 모습입니다.

border-radius

linear

ease

ease-in

ease-out

ease-in-out

<style>
    .timing.bg1 > div {background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);}
    .timing.bg7 > div {background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);}
    .timing {padding: 20px;}
    .timing > div {
        width: 100px; height: 100px;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        line-height: 100px;
        margin: 10px;
        position: relative;
        overflow: hidden;
    }
    .timing1.show {animation: move 2s 1 linear;}
    .timing2.show {animation: move 2s 1 ease;}
    .timing3.show {animation: move 2s 1 ease-in;}
    .timing4.show {animation: move 2s 1 ease-out;}
    .timing5.show {animation: move 2s 1 ease-in-out;}

    @keyframes move {
        0% {left: 0%;}
        50% {left: calc(100% - 120px)}
        100% {left: 0%;}
    }
</style>

<div class="timing bg1">
    <div class="timing1"><span>linear</span></div>
    <div class="timing2"><span>ease</span></div>
    <div class="timing3"><span>ease-in</span></div>
    <div class="timing4"><span>ease-out</span></div>
    <div class="timing5"><span>ease-in-out</span></div>
</div>

//script
$(".start1").click(function(){
    $(".timing.bg1 > div").addClass("show");
    setTimeout(function(){
        $(".timing.bg1 > div").removeClass("show");
    },2000);
});

timing-function 설정으로 애니메이션의 단계별 동작을 나타냅니다.

border-radius

step-start

step-end

steps(4, start)

steps(4, end)

steps(10, start)

<style>
    .timing.bg2 > div {background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);}
    .timing.bg9 > div {background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);}
    
    .timing6.show {animation: move 4s 1 step-start;}
    .timing7.show {animation: move 4s 1 step-end;}
    .timing8.show {animation: move 4s 1 steps(4, start);}
    .timing9.show {animation: move 4s 1 steps(4, end);}
    .timing10.show {animation: move 4s 1 steps(10, start);}
    .timing11.show {animation: move 4s 1 steps(10, end);}
</style>

<div class="timing bg2">
    <div class="timing6"><span>step-start</span></div>
    <div class="timing7"><span>step-end</span></div>
    <div class="timing8"><span>steps(4, start)</span></div>
    <div class="timing9"><span>steps(4, end)</span></div>
    <div class="timing10"><span>steps(10, start)</span></div>
    <div class="timing11"><span>steps(10, start)</span></div>
</div>

//script
$(".start2").click(function(){
    $(".timing.bg2 > div").addClass("show");
    setTimeout(function(){
        $(".timing.bg2 > div").removeClass("show");
    },4000);
});

$(".stepBtnStart").click(function(e){
    e.preventDefault();
    $(".stepbox").removeClass("stop").addClass("start");
});
$(".stepBtnStop").click(function(e){
    e.preventDefault();
    $(".stepbox").removeClass("start").addClass("stop");
});

cubic-bezier( ) function은 CSS에서 transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰입니다.

border-radius

timing12

timing13

timing14

timing15

timing16

<style>
    .timing.bg3 > div {background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);}
    .timing12.show {animation: move 3s 2 cubic-bezier(0,.71,0,1);}
    .timing13.show {animation: move 3s 2 cubic-bezier(0,.71,1,-0.28);}
    .timing14.show {animation: move 3s 2 cubic-bezier(1,-0.52,1,-0.28);}
    .timing15.show {animation: move 3s 2 cubic-bezier(1,.02,0,1.01);}
    .timing16.show {animation: move 3s 2 cubic-bezier(.33,2.04,1,2.05);}
</style>

<div class="timing bg3">
    <div class="timing12"><span>timing12</span></div>
    <div class="timing13"><span>timing13</span></div>
    <div class="timing14"><span>timing14</span></div>
    <div class="timing15"><span>timing15</span></div>
    <div class="timing16"><span>timing16</span></div>
</div>

//script
$(".start3").click(function(){
    $(".timing.bg3 > div").addClass("show");
    setTimeout(function(){
        $(".timing.bg3 > div").removeClass("show");
    },3000);
});

animation-delay CSS 속성은 애니메이션이 시작할 시점을 지정합니다. 시작 즉시, 잠시 후에, 또는 애니메이션이 일부 진행한 시점부터 시작할 수 있습니다.

border-radius

timing17

timing18

timing19

timing20

<style>
    .timing.bg4 > div {background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);}
    .timing.bg8 > div {background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);}
    .timing17.show {animation: move 3s 0.1s 2 ease;}
    .timing18.show {animation: move 3s 0.2s 2 ease;}
    .timing19.show {animation: move 3s 0.3s 2 ease;}
    .timing20.show {animation: move 3s 0.4s 2 ease;}
</style>

<div class="timing bg4">
    <div class="timing17"><span>timing17</span></div>
    <div class="timing18"><span>timing18</span></div>
    <div class="timing19"><span>timing19</span></div>
    <div class="timing20"><span>timing20</span></div>
</div>

//script
$(".start4").click(function(){
    $(".timing.bg4 > div").addClass("show");
    setTimeout(function(){
        $(".timing.bg4 > div").removeClass("show");
    },3000);
});

animation-iteration-count 속성은 애니메이션 효과의 반복 횟수를 설정합니다. 이 속성값으로 infinite를 설정하면, 애니메이션 효과가 무한히 반복될 것입니다.

animation-iteration-count

timing21

timing22

timing23

timing24

<style>
    .timing.bg5 > div {background-image: linear-gradient(to top, #0fd850 0%, #f9f047 100%);}
    .timing21.show {animation: move 1s 1 ease;}
    .timing22.show {animation: move 1s 2 ease;}
    .timing23.show {animation: move 1s 3 ease;}
    .timing24.show {animation: move 1s infinite ease;}
</style>

<div class="timing bg5">
    <div class="timing21"><span>timing21</span></div>
    <div class="timing22"><span>timing22</span></div>
    <div class="timing23"><span>timing23</span></div>
    <div class="timing24"><span>timing24</span></div>
</div>

//script
$(".start5").click(function(){
    $(".timing.bg5 > div").addClass("show");
});

animation-direction CSS 속성은 애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.

animation-direction

timing25

<style>
    .timing.bg6 {height: 600px;}
    .timing.bg6 > div {background-image: linear-gradient(-225deg, #FF057C 0%, #8D0B93 50%, #321575 100%);}
    .timing25.normal {animation: move2 4s 5 ease normal;}
    .timing25.reverse {animation: move2 4s 5 ease reverse;}
    .timing25.alternate {animation: move2 4s 5 ease alternate;}
    .timing25.alternate-reverse {animation: move2 4s 5 ease alternate-reverse;}

    @keyframes move2 {
        0%   {left: 0; top: 0;}
        25%  {left: calc(100% - 120px); top: 0;}
        50%  {left: calc(100% - 120px); top: calc(100% - 120px);}
        75%  {left: 0; top: calc(100% - 120px);}
        100% {left: 0; top: 0;}
    }
</style>

<div class="timing bg6">
    <div class="timing25"><span>timing25</span></div>
</div>

//script
$("#intro6 > button").click(function(){
    let txt = $(this).text();
    $(".timing25").removeClass("normal reverse alternate alternate-reverse").addClass(txt);
});

animation-fill-mode CSS 속성은 CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다.

animation-direction

timing26

timing27

timing28

timing29

<style>
    .timing26.show {animation: move3 3s 1 ease; animation-fill-mode: none;}
    .timing27.show {animation: move3 3s 1 ease; animation-fill-mode: forwards;}
    .timing28.show {animation: move3 3s 1 ease; animation-fill-mode: backwards;}
    .timing29.show {animation: move3 3s 1 ease; animation-fill-mode: both;}
    @keyframes move3 {
        0% {left: 0%;}
        100% {left: calc(100% - 120px);}
    }
</style>

<div class="timing bg7">
    <div class="timing26"><span>timing26</span></div>
    <div class="timing27"><span>timing27</span></div>
    <div class="timing28"><span>timing28</span></div>
    <div class="timing29"><span>timing29</span></div>
</div>

//script
$(".start7").click(function(){
    $(".timing.bg7 > div").addClass("show");
});

animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있습니다.

animation-direction

timing31

<style>
    .timing.bg8 {height: 600px;}
    .timing30.running {animation: move2 4s 100 ease; animation-play-state: running;}
    .timing30.paused {animation: move2 4s 100 ease; animation-play-state: paused;}
</style>

<div class="timing bg8">
    <div class="timing30"><span>timing31</span></div>
</div>

//script
$("#intro8 > button").click(function(){
    let txt = $(this).text();
    $(".timing30").removeClass("running paused").addClass(txt);
});

Animate.css는 css의 애니메이션 효과들을 라이브러리화 하여 누구나도 css 깊을 지식 없이 사용하기 쉽게 도와줍니다.

animation-direction

timing31

timing32

timing33

timing34

timing35

timing36

timing37

<style>
    .timing.bg9 {display: flex; justify-content: space-between; min-height: 400px;}
    .timing.bg9 > div.ani1 {animation: slideOutRight 1s ease;}
    .timing.bg9 > div.ani2 {animation: headShake 1s 10 ease;}
    .timing.bg9 > div.ani3 {}
    .timing.bg9 > div.ani4 {}
    .timing.bg9 > div.ani5 {}
    .timing.bg9 > div.ani6 {}
    .timing.bg9 > div.ani7 {}

    @keyframes slideOutRight {
        from {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            visibility: hidden;
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }
    }
</style>

<div class="timing bg9">
    <div class="timing31"><span>timing31</span></div>
    <div class="timing32"><span>timing32</span></div>
    <div class="timing33"><span>timing33</span></div>
    <div class="timing34"><span>timing34</span></div>
    <div class="timing35"><span>timing35</span></div>
    <div class="timing36"><span>timing36</span></div>
    <div class="timing37"><span>timing37</span></div>
</div>

//script
$("#intro9 > button").click(function(){
    let txt = $(this).text();
    $(".timing.bg9 > div").removeClass("ani1 ani2 ani3 ani4 ani5 ani6 ani7").addClass(txt);
});

다수 원 회전 애니메이션 (1)	2022.09.26
CSS Animation 2 (4)	2022.09.08
SVG Animation (5)	2022.09.07
SGV Intro (5)	2022.09.07
박스 회전 애니메이션 (4)	2022.08.29

웹코딩 공부장

css animation 1

CSS 애니메이션 효과

animation 속성

transtion 속성

timing-function

timing-function

border-radius

timing-function

border-radius

cubic-bezier

border-radius

animation-delay

border-radius

animation-iteration-count

animation-iteration-count

animation-direction

animation-direction

animation-fill-mode

animation-direction

animation-play-state

animation-direction

Animatine.css

animation-direction

'CSS' 카테고리의 다른 글

댓글

HTML

CSS

JAVASCRIPT

티스토리툴바

css animation 1

CSS 애니메이션 효과

animation 속성

transtion 속성

timing-function

timing-function Start

border-radius

timing-function Start

border-radius

cubic-bezier Start

border-radius

animation-delay Start

border-radius

animation-iteration-count Start

animation-iteration-count

animation-direction normal reverse alternate alternate-reverse

animation-direction

animation-fill-mode Start

animation-direction

animation-play-state running paused

animation-direction

Animatine.css ani1 ani2 ani3 ani4 ani5 ani6 ani7

animation-direction

'CSS' 카테고리의 다른 글

관련글

댓글

HTML

CSS

JAVASCRIPT

티스토리툴바

timing-function

timing-function

cubic-bezier

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

Animatine.css