\n\u003C/div>\n",{"id":227,"type":20,"data":228},"pxJs_cn7na",{"text":229},"Next, let's add some basic CSS styles just to style the image.",{"id":231,"type":39,"data":232},"KQNe2ltz5S",{"code":233},".pulse {\n position: relative; /* Will be needed in the future for animation */\n text-align: center; \n padding: 20px;\n border-radius: 50%;\n background: #EF3C50;\n width: 80px;\n height: 80px;\n}",{"id":235,"type":20,"data":236},"aS80byzgUJ",{"text":237},"Next, we will style \u003Cb>::before\u003C/b> pseudo-element. This element will be animated. Basically, this element will be our \"effect\". During animation, we will simply change it's size and opacity.",{"id":239,"type":39,"data":240},"oyme-hXbxO",{"code":241},".pulse::before {\n content: ''; /* We need this to display pseudo-element */\n position: absolute;\n border: 2px solid #EF3C50;\n opacity: 0;\n left: -20px;\n right: -20px;\n top: -20px;\n bottom: -20px;\n border-radius: 50%;\n animation: pulse 2.5s linear infinite;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1.2);\n opacity: 0;\n }\n}",{"id":243,"type":20,"data":244},"noGLd10Hvx",{"text":245},"That's all. If you run this code right now, you will see the animation but only with one animating element. Let's make animation looks better.",{"id":247,"type":29,"data":248},"Gy6RBn3_jt",{"text":249,"level":32},"CSS pulse animation: final code",{"id":251,"type":20,"data":252},"psZdqSvc7a",{"text":253},"To make animation better, let's do the same thing for ::after, as we did it for ::before. Also, we will add animation delay for one of this pseudo-element.",{"id":255,"type":39,"data":256},"KpMgFAhVv_",{"code":257},".pulse::after,\n.pulse::before {\n content: '';\n position: absolute;\n border: 2px solid #EF3C50;\n opacity: 0;\n left: -20px;\n right: -20px;\n top: -20px;\n bottom: -20px;\n border-radius: 50%;\n animation: pulse 2.5s linear infinite; /* You can change properties here to tune animation */\n}\n\n.pulse::after {\n animation-delay: 1.25s;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1.2);\n opacity: 0;\n }\n}",{"id":259,"type":20,"data":260},"IjJySBZb8J",{"text":183},{"id":262,"type":186,"data":263},"9gQ25iM2pa",{"service":188,"source":264,"embed":265,"width":191,"height":192,"caption":266},"https://codepen.io/Nazarii-Semeniuk/pen/oNOyQGw","https://codepen.io/Nazarii-Semeniuk/embed/oNOyQGw?height=300&theme-id=0&default-tab=css,result&embed-version=2","My code for pure css pulse animation on codepen","/uploads/posts/2024/04/12/pure-css-pusle-animation.jpg",243,[270],{"_id":77,"name":78,"slug":79,"description":80,"types":271,"createdAt":82,"__v":83},[73],1712603104173,{"message":5,"tags":274},[275],{"_id":77,"name":78,"slug":79,"description":80,"types":276,"createdAt":82,"__v":83},[73],["Reactive",278],{"$smodal":279,"$snotifications":281},{"name":280},null,[],["Set"],["ShallowReactive",284],{"posts-get-many-tutorial":-1,"tags-get-many-tutorial":-1},"/tutorials/"]