\n\u003C/div>\n",{"id":228,"type":20,"data":229},"pxJs_cn7na",{"text":230},"Next, let's add some basic CSS styles just to style the image.",{"id":232,"type":39,"data":233},"KQNe2ltz5S",{"code":234},".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":236,"type":20,"data":237},"aS80byzgUJ",{"text":238},"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":240,"type":39,"data":241},"oyme-hXbxO",{"code":242},".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":244,"type":20,"data":245},"noGLd10Hvx",{"text":246},"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":248,"type":29,"data":249},"Gy6RBn3_jt",{"text":250,"level":32},"CSS pulse animation: final code",{"id":252,"type":20,"data":253},"psZdqSvc7a",{"text":254},"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":256,"type":39,"data":257},"KpMgFAhVv_",{"code":258},".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":260,"type":20,"data":261},"IjJySBZb8J",{"text":184},{"id":263,"type":187,"data":264},"9gQ25iM2pa",{"service":189,"source":265,"embed":266,"width":192,"height":193,"caption":267},"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",229,[271],{"_id":77,"name":78,"slug":79,"description":80,"types":272,"createdAt":82,"__v":83},[73],1712603104173,{"message":5,"tags":275},[276],{"_id":77,"name":78,"slug":79,"description":80,"types":277,"createdAt":82,"__v":83},[73],["Reactive",279],{"$snuxt-i18n-meta":280,"$smodal":281,"$snotifications":283},{},{"name":282},null,[],["Set"],["ShallowReactive",286],{"$3bEZPoCk6Y":-1,"$5K23LhbIPt":-1},"/tutorials/"]