CSS Text, Background-color Blink

첫 번째. 깜빡이는 글자(Text)

.blinkText {
   -webkit-animation:blink .2s ease-in-out infinite alternate; /* Safari 4+ */
   -moz-animation:blink .2s ease-in-out infinite alternate; /* Fx 5+ */
    animation:blink .2s ease-in-out infinite alternate; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes blink {
    0% {opacity:0}
    100% {opacity:1}
}
@-moz-keyframes blink {
    0% {opacity:0}
    100% {opacity:1}
}
@keyframes blink {
    0% {opacity:0}
    100% {opacity:1}
}

 

 

두 번째. 깜빡이는 배경색

.blinkBg{
    -webkit-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Safari 4+ */
    -moz-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Fx 5+ */
    animation: NAME-YOUR-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
    0%, 49% {background-color:rgba(1,1,1,0)}
    50%, 100% {background-color:#ffd7d7}
}
@-moz-keyframes NAME-YOUR-ANIMATION {
    0%, 49% {background-color:rgba(1,1,1,0)}
    50%, 100% {background-color:#ffd7d7}
}
@keyframes NAME-YOUR-ANIMATION {
    0%, 49% {background-color:rgba(1,1,1,0)}
    50%, 100% {background-color:#ffd7d7}
}

 

이 소스를 사용했던 부분은

 

입점업체에서 해당 주문서에 대한 이슈를 주문서 관리 메모로 작성을 하면

 

본사 쪽 주문관리 페이지에서

 

왼쪽 주문 상태별 메뉴의 배경색을 깜빡이게 하고, 주문서 목록에서는 해당 주문서의 주문번호를 깜빡이게 해서

 

관리자가 이슈를 빨리 확인하게 위해 사용함

 

CSS로 간단히 처리하고, 생각보다 효율이 높은 편

 

다음에는 어떤 걸 사용해 볼까?