Hướng dẫn sử dụng CSS Animation tạo chữ nhấp nháy

Để tạo hiệu ứng chữ nhấp nháy thì chúng ta có thể sử dụng jQuery hoặc CSS trong bài này mình sẽ hướng dẫn các bạn cách dùng thuộc tính @keyframes của CSS để tạo ra hiệu ứng chữ nhấp nháy.

Để tạo chữ nhấp nháy bạn dùng code css sau:

@-webkit-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@-moz-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@-o-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
.text-animation {
background:#3d3d3d;
font-size:24px;
font-weight:bold;
-webkit-animation: my 700ms infinite;
-moz-animation: my 700ms infinite;
-o-animation: my 700ms infinite;
animation: my 700ms infinite;
}

• @keyframes có nhiệm vụ điều khiển diễn biến một hoạt động của một thành phần, và cụ thể chính là điều khiển cái phần màu mè của “Chữ nhấp nháy”
• Anination có nhiệm vụ làm cho “chữ nhấp nháy ” nhấp nháy

Cách sử dụng

<p class="text-animation"> Chữ nhấp nháy</p>

Giải thích chút về code:

@keyframes my { 
0% { color: #F8CD0A; } 
50% { color: #fff; } 
100% { color: #F8CD0A; }
 }

my: là tên của thuộc tính mình đặt, tên thuộc tính này được animation sử dụng.

0%,50%,100%: là các thuộc tính css cho từng giai đoạn, ở đây mình sử dụng thuộc tính color để đổi 2 màu trắng và cam thay đổi nhau

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

Và trong class "text-animation" bạn cho thuộc tính animation chữ trong class chuyển động theo ý bạn

my: là tên animation, và trong trường hợp này thì glowing chính là tên thuộc tính mình đặt ở trên keyframes

700ms: là thời gian chuyển động (1s = 1000ms)

infinite: để cho animation luôn chuyển động (có nghĩa là nó sẽ nhấp nháy mãi).