Animation

Animation

Animation : name | duration | timing-fuction | delay | iteration | direction | fill-mode | play-state

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

Transition

Transition : property | duration | timing-fuction | delay

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

Timing-fuction

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

Animation-timing-function1 Click

linear
ease
ease-in
ease-out
ease-in-out
.sBox > div {
    width: 60px; height: 60px;
    background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
    text-align: center; color: #fff;
    line-height: 60px;
    border-radius: 50%;
    margin: 10px;
    position: relative;
}
.btn{
    color: #fff;
    background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
}
.circle1.show {animation: move 2s 10 linear;}
.circle2.show {animation: move 2s 10 ease;}
.circle3.show {animation: move 2s 10 ease-in;}
.circle4.show {animation: move 2s 10 ease-out;}
.circle5.show {animation: move 2s 10 ease-in-out;}

@keyframes move {
    0% {left: 0%;}
    50% {left: calc(100% - 70px);}
    100% {left: 0%;}
}

Animation-timing-function2 Click

step-start
step-end
steps(4, start)
steps(4, end)
steps(10, start)
steps(10, end)
.circle6.show {animation: move 3s 1 step-start;}
.circle7.show {animation: move 3s 1 step-end;}
.circle8.show {animation: move 3s 1 steps(4, start);}
.circle9.show {animation: move 3s 1 steps(4, end);}
.circle10.show {animation: move 3s 1 steps(10, start);}
.circle11.show {animation: move 3s 1 steps(10, end);}

See the Pen Animation Steps by MiSolJeong (@Soool) on CodePen.

Animation-timing-function3 Click

cubic1
cubic2
cubic3
cubic4
cubic5
.circle12.show {animation: move  3s 1 cubic-bezier(0, 0, 0, 0);}
.circle13.show {animation: move  3s 1 cubic-bezier(.29,1.48,.83,.67);}
.circle14.show {animation: move  3s 1 cubic-bezier(.74,.13,.83,.67);}
.circle15.show {animation: move  3s 1 cubic-bezier(.74,.13,.35,1.01);}
.circle16.show {animation: move  3s 1 cubic-bezier(.29,1.24,.88,.36);}

Sample4 - delay Click

cubic17
cubic18
cubic19
cubic20
cubic21
.circle17.show {animation: move  2s 10 cubic-bezier(1, 0.25, 0, 1);}
.circle18.show {animation: move  2s 10 cubic-bezier(1, 0.25, 0, 1) 0.1s;}
.circle19.show {animation: move  2s 10 cubic-bezier(1, 0.25, 0, 1) 0.2s;}
.circle20.show {animation: move  2s 10 cubic-bezier(1, 0.25, 0, 1) 0.3s;}
.circle21.show {animation: move  2s 10 cubic-bezier(1, 0.25, 0, 1) 0.4s;}

Sample5 - derection normal reverse alternate alternate-reverse start stop

box
.circle22.normal {animation: move2 3s 10 ease; animation-direction: normal;}
.circle22.alternate {animation: move2 3s 10 ease; animation-direction: alternate;}
.circle22.reverse {animation: move2 3s 10 ease; animation-direction: reverse;}
.circle22.alternate-reverse {animation: move2 3s 10 ease; animation-direction: alternate-reverse;}
.circle22.start {animation: move2 3s 10 ease; animation-play-state: running; }
.circle22.stop {animation: move2 3s 10 ease; animation-play-state: paused; 

@keyframes move2 {
    0% {left: 0; top: 0; }
    25% {left: calc(100% - 80px); top: 0;}
    50% {left: calc(100% - 80px); top: calc(100% - 80px);}
    75% {left: 0; top: calc(100% - 80px);}
    100% {left: 0; top: 0; }
}

Sample6 bounce rubberBand tada hinge zoomIn flipOutX swing jello bounceInUp slideInDown

box
box
box
box
box
.sBox.s6 > div {background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%); }
.sBox.s6 > div.bounce {background-image: url(http://nateonweb.nate.com/imgbbs/1/20160906/_20160906152432_002.gif); background-size: cover;}
.sBox.s6 > div.rubberBand {background-image: url(https://storage.cobak.co/uploads/1543287834762036_bdb380668b.gif); background-size: cover;}
.sBox.s6 > div.tada {background-image: url(https://i.pinimg.com/originals/94/4d/03/944d030fecf2a5d624dfdc5c9ef9f615.gif); background-size: cover;}
.sBox.s6 > div.hinge {background-image: url(https://i.pinimg.com/originals/f6/72/d2/f672d235f4aee4e1752078d5f1f340fa.gif); background-size: cover;}
.sBox.s6 > div.zoomIn {background-image: url(https://metalgall.net/files/attach/images/98/446/532/001/35947238dfdc634e87930173475e022f.gif); background-size: cover;}
.sBox.s6 > div.flipOutX {background-image: url(https://s3.orbi.kr/data/file/united2/b0e76db9-68d2-46db-8180-7fad31462843jpg.gif); background-size: cover;}
.sBox.s6 > div.swing {background-image: url(https://i.pinimg.com/originals/d3/38/6e/d3386e3ed3aa9509f478f446e09f2cf0.gif); background-size: cover;}
.sBox.s6 > div.jello {background-image: url(https://i.pinimg.com/originals/9f/d7/a8/9fd7a85b7122ad787edcee4ac9c844c0.gif); background-size: cover;} 
.sBox.s6 > div.bounceInUp {background-image: url(https://i.pinimg.com/originals/73/22/69/732269033ecd731cf7bd942efe3e1280.gif); background-size: cover;} 
.sBox.s6 > div.slideInDown {background-image: url(https://i.pinimg.com/originals/78/85/71/788571c3e1d0c34afcf1df20ad35ab72.gif); background-size: cover;} 
.box.bounce {animation: bounce 1s 10 ease; }
.box.rubberBand {animation: rubberBand 1s 10 ease; }
.box.tada {animation: tada 1s 10 ease; }
.box.hinge {animation: hinge 1s 10 ease; } 
.box.zoomIn {animation: zoomIn 2s 10 ease; } 
.box.flipOutX {animation: flipOutX 2s 10 ease; } 
.box.swing {animation: swing 1s 10 ease; } 
.box.jello {animation: jello 1s 10 ease; } 
.box.bounceInUp {animation: bounceInUp 3s 10 ease; } 
.box.slideInDown {animation: slideInDown 1s 10 ease; } 

@keyframes bounce {
0%,  20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
    animation-timing-fuction: cubic-bezier(0.215, 0.61, 0.355, 1);
}
40%,  43% {
    transform: translate3d(0, -30px, 0);
    animation-timing-fuction: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
70% {
    transform: translate3d(0, -15px, 0);
    animation-timing-fuction: cubic-bezier(0.215, 0.61, 0.355, 1);
}
90% {
    transform: translate3d(0, -4px, 0);
    animation-timing-fuction: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
}

@keyframes rubberBand {
0% {transform: scale3d(1, 1, 1);}
30% {transform: scale3d(1.25, 0.75, 1);}
40% {transform: scale3d(0.75, 1.25, 1);}
50% {transform: scale3d(1.15, 0.85, 1);}
65% {transform: scale3d(0.95, 1.05, 1);}
75% {transform: scale3d(1.05, 0.95, 1);}
100% {transform: scale3d(1, 1, 1);}
}

@keyframes tada {
0% {transform: scale3d(1,1,1);}
10%, 20% {transform: scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg);}
30%, 50%, 70%, 90% {transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);}
40%, 60%, 80% {transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);}
100% {transform: scale3d(1,1,1);}	
}

@keyframes hinge {
    0% {transform-origin: top left; }

    20%, 60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    }

    40%, 80% {
    transform: rotate3d(0, 0, 1, 60deg);;
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
    }

    100% {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
    }
}

@keyframes zoomIn {
    from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {opacity: 1;}
}

@keyframes flipOutX {
    from {transform: perspective(400px);}

    30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
    }

    to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
    }
}

@keyframes swing {
    20% {transform: rotate3d(0, 0, 1, 15deg);}

    40% {transform: rotate3d(0, 0, 1, -10deg);}

    60% {transform: rotate3d(0, 0, 1, 5deg);}

    80% {transform: rotate3d(0, 0, 1, -5deg);}

    to {transform: rotate3d(0, 0, 1, 0deg);}
}

@keyframes jello {
from, 11.1%, to {transform: translate3d(0, 0, 0);}

22.2% {transform: skewX(-12.5deg) skewY(-12.5deg);}

33.3% {transform: skewX(6.25deg) skewY(6.25deg);}

44.4% {transform: skewX(-3.125deg) skewY(-3.125deg);}

55.5% {transform: skewX(1.5625deg) skewY(1.5625deg);}

66.6% {transform: skewX(-0.78125deg) skewY(-0.78125deg);}

77.7% {transform: skewX(0.390625deg) skewY(0.390625deg);}

88.8% {transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}

@keyframes bounceInUp {
from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}

from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
}

60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
}

75% {transform: tr
    
    anslate3d(0, 10px, 0);}

90% {transform: translate3d(0, -5px, 0);}

to {transform: translate3d(0, 0, 0);}
}

@keyframes slideInDown {
from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
}

to {transform: translate3d(0, 0, 0);}
}