How to use icons to make an animated effect with JavaScript?

เพื่อใช้ไอคอนสร้างเอฟเฟกต์แอนิเมชัน โค้ดมีดังนี้

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style>    #user {       font-size: 60px;       color:rgb(106, 33, 201);    }    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       padding: 20px;    } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <body> <h1>Animating Icon example</h1> <div id="user" class="fa"></div> <script>    function userShift() {       var userEle;       userEle = document.getElementById("user");       userEle.innerHTML = "";       setTimeout(function() {          userEle.innerHTML = "";       }, 1000);       setTimeout(function() {          userEle.innerHTML = "";       }, 2000);    }    userShift();    setInterval(userShift, 4000); </script> </body> </html>

ผลลัพธ์

โค้ดข้างต้นจะสร้างผลลัพธ์ดังนี้ -