Vertical Animation 방법

1. transition 사용법

#TICKER {

display:none;

}

@media (min-width: 600px) {

#TICKER {

bottom: 32px;

left: 32px;

margin-left: 0;

right: 32px;

top: 32px !important;

width: auto;

position: fixed;

display:block;

}

#TICKER_LAYOUT {

box-sizing: border-box;

width: 300px;

max-height: 0px;

right:0px; 

bottom: 0px;

position: absolute;

overflow: hidden;

background-color:red;

-webkit-transition: 3s;

-moz-transition: 3s;

-ms-transition: 3s;

-o-transition: 3s;

transition: 3s;

}

.ticker_layout {

padding: 10px;

}

.ticker_animation {

-webkit-transition: 3s;

-moz-transition: 3s;

-ms-transition: 3s;

-o-transition: 3s;

transition: 3s;

max-height: 100px !important;

}

}

JS 는 아래 와 같다.

function onPlayAni() {

var ticker = document.getElementById('_NB_TICKER_LAYOUT');

ticker.classList.add('ticker_animation');

setTimeout(function(){

ticker.classList.remove('ticker_animation');

}, 3000);

}

2. animation 사용법

#TICKER {

bottom: 32px;

left: 32px;

margin-left: 0;

right: 32px;

top: 32px !important;

width: auto;

overflow: hidden;

position: fixed;

display:block;

}

#TICKER_LAYOUT {

width: 100px;

right:0px; 

bottom: 0px;

position: absolute;

background-color:red;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 2s;

}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0%   {background-color:red; right:0px; bottom: 0px;max-height:0px;}

100% {background-color:red; right:0px; bottom: 0px;max-height:100px;}

}

/* Standard syntax */

@keyframes example {

0%   {background-color:red; right:0px; bottom:0px; max-height:0px;}

100% {background-color:red; right:0px; bottom:0px; max-height:100px;}

}