[css]강조모션 애니메이션 css

빨간점 강조 애니메이션 효과

깜박깜박임

@keyframes joyride-beacon-outer {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

.timeline .sign-x{ display: block; position: absolute; top: -10px; right: -9px;

width: 24px; height: 24px;}

.timeline .sign-outer{ display: block; position: absolute; top: 0; right: 0;

height: 100%; width: 100%;

-webkit-animation: joyride-beacon-outer 1.2s ease-in-out infinite;

animation: joyride-beacon-outer 1.2s ease-in-out infinite;

background-color: rgba(255,0,68,.2);

border: 2px solid #f04;

border-radius: 50%;

box-sizing: border-box;

opacity: .9;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

-webkit-transform-origin: center;

transform-origin: center;

}

.timeline .sign-inner{ display: block; position: absolute; top: 50%; left: 50%;

height: 50%; width: 50%;

-webkit-animation: joyride-beacon-inner 1.2s ease-in-out infinite;

animation: joyride-beacon-inner 1.2s ease-in-out infinite;

background-color: #f04;

border-radius: 50%;

opacity: .7;

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

}