웹스토리보이

Animation

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

Transition

transition : property | duration | timing-fuction | delay

종류	예시
transition-property	트렌지션을 적용할 CSS 속성 대상을 설정합니다.
transition-druation	트렌지션 작동시간을 설정합니다.
transition-timing-function	트렌지션 움직임 효과를 설정합니다.
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)	버지니아 곡선 값을 만들어서 설정합니다.

linear

ease

ease-in

ease-out

ease-in-out

.circle1.show{animation: move 2s 1 linear;}
.circle2.show{animation: move 2s 1 ease;}
.circle3.show{animation: move 2s 1 ease-in}
.circle4.show{animation: move 2s 1 ease-out;}
.circle5.show{animation: move 2s 1 ease-in-out;}
@keyframes move { 
    0% { left: 0%;}
    50% { left:calc(100% - 80px);}
    100% {left: 0%; }
}

step-start;

step-end;

steps(4,start)

steps(10,start)

steps(10,and)

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

cubic-bezier(0,0,0,0)

cubic-bezier(1,0,0,1)

cubic-bezier(0,.58,0,1.65)

cubic-bezier(1,.2,.34,1.32)

cubic-bezier(1,-0.88,.01,1.53)

.circle12.show{animation: move 3s 10 cubic-bezier(0,0,0,0);}
.circle13.show{animation: move 3s 10 cubic-bezier(1,0,0,1);}
.circle14.show{animation: move 3s 10 cubic-bezier(0,.58,0,1.65);}
.circle15.show{animation: move 3s 10 cubic-bezier(1,.2,.34,1.32);}
.circle16.show{animation: move 3s 10 cubic-bezier(1,-0.88,.01,1.53);}

circle17

circle18

circle19

circle20

.circle17.show{animation: move 3s 10 cubic-bezier(0,6,2,.97) 0.1s;}
.circle18.show{animation: move 3s 10 cubic-bezier(0,6,2,.97) 0.2s;}
.circle19.show{animation: move 3s 10 cubic-bezier(0,6,2,.97) 0.3s;}
.circle20.show{animation: move 3s 10 cubic-bezier(0,6,2,.97) 0.4s;}

circle21

.sBox.s5 {height: 500px;}
.circle21.normal {animation: move2 3s 10 ease normal;}
.circle21.reverse {animation: move2 3s 10 ease reverse;}
.circle21.alternate {animation: move2 3s 10 ease alternate;}
.circle21.alternate-reverse {animation: move2 3s 10 ease alternate-reverse;}
@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 }

circle22

circle23

circle24

circle25

.circle22.show {animation: move 2s ease 1;}
.circle23.show {animation: move 2s ease 2;}
.circle24.show {animation: move 2s ease 3;}
.circle25.show {animation: move 2s ease infinite;}

circle26

.sBox.s7 {height: 500px;}
.sBox.s7>div.running {
    animation: move2 3s 10 ease;
    animation-play-state: running;
}
.sBox.s7>div.paused {
    animation: move2 3s 10 ease;
    animation-play-state: paused;
}

circle27

.sBox.s8>div {display: inline-block;}
.sBox.s8>div.bounce {animation: bounce 1s 10 ease;}
.sBox.s8>div.rubberBand {animation: rubberBand 1s 10 ease;}
.sBox.s8>div.jello {animation: jello 1s 10 ease;}
.sBox.s8>div.swing {animation: swing 1s 10 ease;}
.sBox.s8>div.heartBeat {animation: heartBeat 1s 10 ease;}
.sBox.s8>div.flash {animation: flash 1s 10 ease;}
@keyframes bounce {
    from,60%, 75%,90%,to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
    0% {opacity: 0;
        transform: translate3d(-3000px, 0, 0) scaleX(3);}
    60% {opacity: 1;
        transform: translate3d(25px, 0, 0) scaleX(1); }
    75% {transform: translate3d(-10px, 0, 0) scaleX(0.98);}
    90% {transform: translate3d(5px, 0, 0) scaleX(0.995);}
    to {transform: translate3d(0, 0, 0);}
}

@keyframes rubberBand {
    from {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);}
    to {transform: scale3d(1, 1, 1);}
}
@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 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 heartBeat {
    0% {transform: scale(1);}
    14% { transform: scale(1.3); }
    28% {transform: scale(1);}
    42% {transform: scale(1.3);}
    70% { transform: scale(1);}
}

@keyframes flash {
    from,50%,to {opacity: 1;}
    25%,75% {opacity: 0;}
}

CSS Reference v1.0 </doc>

Animation

Animation

Transition

Timing-fuction

Animation-timing-function Click

Animation-timing-function Click

Animation-timing-function : cubic-bezier Click

Animation-delay Click

Animation-direction normal reverse alternate alternate-reverse

Animation-iteration-countSTART

Animation-play-state running paused

Animation-effect bounce rubberBand jello swing heartBeat flash