[HTML&CSS] 텍스트, 이미지 깜빡이는 애니메이션 효과 주기

아래 소스 코드는 CSS를 사용하여 텍스트와 이미지에 깜빡이는 애니메이션 효과를 적용하는 예시입니다.

 

<style>
@-webkit-keyframes 'blink' {
    80% { background: rgba(255,0,0,1);  }
}

@-webkit-keyframes 'blink-image' {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.blink {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 0.9s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease;
}
.blink-image {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink-image;
    -webkit-animation-timing-function: ease;
}
</style>
<div style="color:yellow;">
	<span class="blink">안녕하세요. 반갑습니다.</span>
</div>
<div style="margin-top:20px;">
	<img class="blink-image" src="https://via.placeholder.com/100x100/BE81F7/FFFF00&text=HELLO" alt="깜빡이는 이미지">
</div>

 

---

소스코드 화면