22017日付21 TIL

CSSでのアニメーション化方法
アニメをあげたいclass/idの中で{
アニメーション名:
アニメーションの速度:
アニメーションの繰り返し回数などを指定します}
@キーフレームアニメーション名{
変わりたい
}

#click_msg{
    animation-name: color_change; /*애니메이션 걸고싶은 위치에 애니메이션 이름*/
    animation-duration: 3s;/*재생속도 0을주면 실행되지않음.*/
    animation-iteration-count: infinite; /*재생횟수 infinite는 애니메이션을 무한으로 반복합니다.*/
}
@keyframes color_change {/*키프레임 애니메이션 이름*/
    주고싶은변화
}

@keyframes color_change {
    from { css-styles; }  두가지 변화만 있다면
    to { css-styles; }
}

@keyframes color_change {
    0% { css-styles; }  세가지 이상 있다면
    50% { css-styles; }
    100% { css-styles; }
}

https://webclub.tistory.com/621 CSSアニメのT-Storyを整理

function show_msg(){
    //#bye 객체가 사라지는 것을 1초뒤로 딜레이. (ms가 기준)
    setTimeout(function(){$('#bye').hide();},1000);
    //이미지 크기 조절 애니메이션
    $('#img').animate({ width: '50%',height:'auto'},500,function() {
        $(this).animate({width: '90%',height:'auto'}, 200, function () {
        $(this).animate({width: '70%',height:'auto'},300);
        });
    });
}

setTimeout() : https://mjmjmj98.tistory.com/33
animate()関数:https://www.codingfactory.net/11820
コールバック関数:https://www.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/

function box_change(){ //메세지1 클릭시 여기서 메세지2의 zindex를 변경
    var msg2 = document.getElementById('pop');
        msg2.style.zIndex = '5';
 // document.getElementById('pop').style.zIndex = '5';
}

zindex : https://www.w3schools.com/jsref/prop_style_zindex.asp
zindex2: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

$('#dex_container').fadeIn('slow');

fade in()関数:https://www.codingfactory.net/10299