\n\u003C/div>\n",{"id":39,"type":20,"data":40},"pxJs_cn7na",{"text":41},"Next, let's add some basic CSS styles just to style the image.",{"id":43,"type":35,"data":44},"KQNe2ltz5S",{"code":45},".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":47,"type":20,"data":48},"aS80byzgUJ",{"text":49},"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":51,"type":35,"data":52},"oyme-hXbxO",{"code":53},".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":55,"type":20,"data":56},"noGLd10Hvx",{"text":57},"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":59,"type":25,"data":60},"Gy6RBn3_jt",{"text":61,"level":28},"CSS pulse animation: final code",{"id":63,"type":20,"data":64},"psZdqSvc7a",{"text":65},"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":67,"type":35,"data":68},"KpMgFAhVv_",{"code":69},".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":71,"type":20,"data":72},"IjJySBZb8J",{"text":73},"Thanks for reading! Hope this tutorial was helpful for you.",{"id":75,"type":76,"data":77},"9gQ25iM2pa","embed",{"service":78,"source":79,"embed":80,"width":81,"height":82,"caption":83},"codepen","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",600,300,"My code for pure css pulse animation on codepen","2.29.1","/uploads/posts/2024/04/12/pure-css-pusle-animation.jpg","tutorial",229,[89],{"_id":90,"name":91,"slug":92,"description":93,"types":94,"createdAt":95,"__v":96},"6616e1f81cb6b57cf765f8a3","CSS","css","Tutorials about CSS. Here you will find posts about how to make cool things using mostly pure CSS and HTML, and yeah, even now it can do more than you're thinking.",[86],1712775437720,0,true,1712603104173,3,{"_id":101,"userId":9,"title":102,"slug":103,"description":104,"content":105,"thumbnail":147,"type":86,"views":148,"tags":149,"published":97,"createdAt":152,"updatedAt":152,"timeToRead":99,"__v":96},"661c06c799d47d3548ebf178","CSS animated gradient for background","css-animated-gradient-for-background","In this short tutorial, I'll show you how to create an animated gradient background using pure CSS. You can apply this CSS animated gradient for any element on your website.",{"html":106,"json":107},"\u003Cp>Hi everyone, welcome to my website. In this short tutorial, I'll show you how to create an animated gradient with CSS for background. If you want just copy and paste necessary code, you can do it directly from this website, or go to \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/JjVBLNX\" target=\"_blank\" rel=\"nofollow\">CodePen\u003C/a> that I created, and copy, update or play with code.\u003C/p>\u003Ch2>Creating an animated gradient with CSS\u003C/h2>\u003Cp>Firstly, let's create an HTML element that will have an animated CSS gradient in the future. I'll create a \u003Ci>div\u003C/i> tag with \u003Ci>'gradient' \u003C/i>class, but you can apply this technique for any element on your website.\u003C/p>\u003Cpre>\u003Ccode><div class=\"gradient\"></div>\u003C/code>\u003C/pre>\u003Cp>Now let's deal with CSS part. The main idea behind this way of creating animated CSS gradient, is to create a bigger background than the element is. In my case, gradient will have a size of 400% of element. And then we will add animation, that will be moving this gradient through the element. Because of this moving, we will achieve gradient animation.\u003C/p>\u003Cpre>\u003Ccode>.gradient {\n height: 450px; /* Here you can use any size for element */\n width: 100%; /* Here you can use any size for element */\n background: linear-gradient(45deg, #FF512F 0%, #DD2476 100%);\n animation: gradient 2s infinite linear; /* 2s - speed of animation */\n background-size: 400%; /* You can play with this value to change intensity of the effect */\n}\n\n@keyframes gradient {\n 0% {\n background-position: 80% 0%;\n }\n 50% {\n background-position: 20% 100%;\n }\n 100% {\n background-position: 80% 0%;\n }\n}\u003C/code>\u003C/pre>\u003Cp>CSS code for animated gradient is very simple. The main difficulty for me personally, is to create nice looking gradient, pick right colors to make it looks fine. But you can make your life easier using CSS gradients generator, such \u003Ca href=\"https://cssgradient.io/\" target=\"_blank\" rel=\"nofollow\">as this one\u003C/a>.\u003C/p>\u003Cp>Thanks for reading! Hope this tutorial was helpful for you.\u003C/p>\u003Cdiv class=\"codepen-embed\">\n \u003Ciframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"CSS animated gradient background on CodePen\" src=\"https://codepen.io/Nazarii-Semeniuk/embed/JjVBLNX?height=500&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\u003C/iframe>\n \u003C/div>",{"time":108,"blocks":109,"version":84},1713113968861,[110,114,118,122,126,130,134,138,141],{"id":111,"type":20,"data":112},"6RZ-1WL730",{"text":113},"Hi everyone, welcome to my website. In this short tutorial, I'll show you how to create an animated gradient with CSS for background. If you want just copy and paste necessary code, you can do it directly from this website, or go to \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/JjVBLNX\" target=\"_blank\" rel=\"nofollow\">CodePen\u003C/a> that I created, and copy, update or play with code.",{"id":115,"type":25,"data":116},"lvdbDlVZjJ",{"text":117,"level":28},"Creating an animated gradient with CSS",{"id":119,"type":20,"data":120},"7Q1XhefDsK",{"text":121},"Firstly, let's create an HTML element that will have an animated CSS gradient in the future. I'll create a \u003Ci>div\u003C/i> tag with \u003Ci>'gradient' \u003C/i>class, but you can apply this technique for any element on your website.",{"id":123,"type":35,"data":124},"YJCzVHV0_f",{"code":125},"\u003Cdiv class=\"gradient\">\u003C/div>",{"id":127,"type":20,"data":128},"ch_RRlXBuS",{"text":129},"Now let's deal with CSS part. The main idea behind this way of creating animated CSS gradient, is to create a bigger background than the element is. In my case, gradient will have a size of 400% of element. And then we will add animation, that will be moving this gradient through the element. Because of this moving, we will achieve gradient animation.",{"id":131,"type":35,"data":132},"kNwqSeA1dA",{"code":133},".gradient {\n height: 450px; /* Here you can use any size for element */\n width: 100%; /* Here you can use any size for element */\n background: linear-gradient(45deg, #FF512F 0%, #DD2476 100%);\n animation: gradient 2s infinite linear; /* 2s - speed of animation */\n background-size: 400%; /* You can play with this value to change intensity of the effect */\n}\n\n@keyframes gradient {\n 0% {\n background-position: 80% 0%;\n }\n 50% {\n background-position: 20% 100%;\n }\n 100% {\n background-position: 80% 0%;\n }\n}",{"id":135,"type":20,"data":136},"PC3Qyi1J58",{"text":137},"CSS code for animated gradient is very simple. The main difficulty for me personally, is to create nice looking gradient, pick right colors to make it looks fine. But you can make your life easier using CSS gradients generator, such \u003Ca href=\"https://cssgradient.io/\" target=\"_blank\" rel=\"nofollow\">as this one\u003C/a>.",{"id":139,"type":20,"data":140},"ZryTrYz3CQ",{"text":73},{"id":142,"type":76,"data":143},"IS3tDwzr7-",{"service":78,"source":144,"embed":145,"width":81,"height":82,"caption":146},"https://codepen.io/Nazarii-Semeniuk/pen/JjVBLNX","https://codepen.io/Nazarii-Semeniuk/embed/JjVBLNX?height=300&theme-id=0&default-tab=css,result&embed-version=2","CSS animated gradient background on CodePen","/uploads/posts/2024/04/14/css-animated-gradient-for-background.jpg",37,[150],{"_id":90,"name":91,"slug":92,"description":93,"types":151,"createdAt":95,"__v":96},[86],1712905880750,{"_id":154,"userId":9,"title":155,"slug":156,"description":157,"content":158,"thumbnail":204,"type":86,"views":205,"tags":206,"published":97,"createdAt":209,"updatedAt":209,"timeToRead":28,"__v":96},"66215d9194008990ab7058c3","Parallax scrolling effect for background using only CSS","parallax-scrolling-effect-for-background-using-only-css","In this short article, I'll show you how to create parallax scrolling effect for background. You can apply parallax CSS effect from this instruction to any element on your website. Also, we'll not be using any libraries or JavaScript, only pure CSS and HTML.",{"html":159,"json":160},"\u003Cp>Hello everyone, welcome to my website. In this short and quick tutorial, I'll show you how to create parallax scrolling effect for background using only CSS and HTML.\u003C/p>\u003Ch2>Creating pure CSS parallax scrolling effect\u003C/h2>\u003Cp>This is a really simple technique. We will use just a specific CSS property, called \u003Ci>background-attachment\u003C/i>. Let's create simple HTML structure first. I'll just place some text over parallax background for example.\u003C/p>\u003Cpre>\u003Ccode><div class=\"parallax\">\n <h1 class=\"parallax__title\">This is parallax</h1>\n</div>\u003C/code>\u003C/pre>\u003Cp>Now, let's add some styles. I'll highlight the most important property to achieve CSS parallax effect with comment in CSS code.\u003C/p>\u003Cpre>\u003Ccode>.parallax {\n background-image: url(bg-image.jpg);\n height: 500px;\n background-attachment: fixed; /* Main property to achieve parallax scroling effect */\n display: flex;\n justify-content: center;\n color: #ffffff;\n font-size: 60px;\n align-items: center;\n position: relative;\n}\n\n.parallax::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n}\n\n.parallax__title {\n z-index: 2;\n}\u003C/code>\u003C/pre>\u003Cp>That's all. You can see what this code doing in the example below.\u003C/p>\u003Ch2>Pure CSS parallax background example\u003C/h2>\u003Cp>Here is an example of CSS parallax background:\u003C/p>\u003Cdiv class=\"parallax\">\n \u003Cdiv class=\"parallax__title\">This is parallax\u003C/div>\n\u003C/div>\n\n\u003Cstyle>\n.parallax {\n background-image: url('https://nazarii-semeniuk.com/uploads/examples/pure-css-parallax-background.jpeg');\n height: 500px;\n background-attachment: fixed;\n display: flex;\n justify-content: center;\n color: #ffffff;\n font-size: 60px;\n align-items: center;\n position: relative;\n}\n\n.parallax::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n}\n\n.parallax__title {\n z-index: 2;\n font-size: 48px;\n font-weight: 700;\n}\n\n@media (max-width: 800px) {\n .parallax {\n font-size: 36px;\n text-align: center;\n }\n}\n\u003C/style>\n",{"time":161,"blocks":162,"version":84},1732124145133,[163,167,171,175,179,183,187,191,195,199],{"id":164,"type":20,"data":165},"Lk2KUvnFUB",{"text":166},"Hello everyone, welcome to my website. In this short and quick tutorial, I'll show you how to create parallax scrolling effect for background using only CSS and HTML.",{"id":168,"type":25,"data":169},"5RMY2K4JIm",{"text":170,"level":28},"Creating pure CSS parallax scrolling effect",{"id":172,"type":20,"data":173},"Uhz62SZdUX",{"text":174},"This is a really simple technique. We will use just a specific CSS property, called \u003Ci>background-attachment\u003C/i>. Let's create simple HTML structure first. I'll just place some text over parallax background for example.",{"id":176,"type":35,"data":177},"UJOW_Hrd4y",{"code":178},"\u003Cdiv class=\"parallax\">\n \u003Ch1 class=\"parallax__title\">This is parallax\u003C/h1>\n\u003C/div>",{"id":180,"type":20,"data":181},"ifd1KMwlEt",{"text":182},"Now, let's add some styles. I'll highlight the most important property to achieve CSS parallax effect with comment in CSS code.",{"id":184,"type":35,"data":185},"2OJZ3wHkLz",{"code":186},".parallax {\n background-image: url(bg-image.jpg);\n height: 500px;\n background-attachment: fixed; /* Main property to achieve parallax scroling effect */\n display: flex;\n justify-content: center;\n color: #ffffff;\n font-size: 60px;\n align-items: center;\n position: relative;\n}\n\n.parallax::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n}\n\n.parallax__title {\n z-index: 2;\n}",{"id":188,"type":20,"data":189},"jpDAP5IV6p",{"text":190},"That's all. You can see what this code doing in the example below.",{"id":192,"type":25,"data":193},"W4GJckwM8U",{"text":194,"level":28},"Pure CSS parallax background example",{"id":196,"type":20,"data":197},"U5oK9NFJ3b",{"text":198},"Here is an example of CSS parallax background:",{"id":200,"type":201,"data":202},"kKTNBolqfq","raw",{"html":203},"\u003Cdiv class=\"parallax\">\n \u003Cdiv class=\"parallax__title\">This is parallax\u003C/div>\n\u003C/div>\n\n\u003Cstyle>\n.parallax {\n background-image: url('https://nazarii-semeniuk.com/uploads/examples/pure-css-parallax-background.jpeg');\n height: 500px;\n background-attachment: fixed;\n display: flex;\n justify-content: center;\n color: #ffffff;\n font-size: 60px;\n align-items: center;\n position: relative;\n}\n\n.parallax::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n}\n\n.parallax__title {\n z-index: 2;\n font-size: 48px;\n font-weight: 700;\n}\n\n@media (max-width: 800px) {\n .parallax {\n font-size: 36px;\n text-align: center;\n }\n}\n\u003C/style>\n","/uploads/posts/2024/04/18/parallax-scrolling-effect-for-background-css.jpg",41,[207],{"_id":90,"name":91,"slug":92,"description":93,"types":208,"createdAt":95,"__v":96},[86],1713462447909,{"_id":211,"userId":9,"title":212,"slug":213,"description":214,"content":215,"thumbnail":268,"type":86,"views":269,"tags":270,"published":97,"createdAt":273,"updatedAt":273,"timeToRead":99,"__v":96},"67349919e2c71ad256c458d8","Pure css shine animation","pure-css-shine-animation","In this simple and easy tutorial, I'm gonna to show you how to create a shine effect for any website element using CSS. Shine animation can create accent for an element. It looks good on buttons. We will be using only pure CSS and HTML, no scripts needed.",{"html":216,"json":217},"\u003Cp>Hi everyone, welcome to my website. In this quick and easy tutorial, I'll show you how to create a shine animation for any element of your website, \u003Cb>using only pure HTML and CSS\u003C/b>, no scripts needed. In the article, I'll implement animation for a button, but you can apply this to almost any element on your website.\u003C/p>\u003Cp>If you want just to copy and paste the code, or to experiment with it, here is a \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/PoMVXvR\" target=\"_blank\" rel=\"nofollow\">codepen\u003C/a> I created with this feature.\u003C/p>\u003Ch2>Creating CSS shine animation effect\u003C/h2>\u003Cp>First things first, let's create an element, to which we will add our shine animation. In my case, I'll create a link, that will play a role of button.\u003C/p>\u003Cpre>\u003Ccode><a href=\"#\" class=\"button\">Button</a>\u003C/code>\u003C/pre>\u003Cp>Next lets add some styles, to make button looks more fancy.\u003C/p>\u003Cpre>\u003Ccode>.button {\n padding: 20px 80px;\n background: linear-gradient(\n 90deg,\n #ff5e69 44.79%,\n #ff8a56 71.87%,\n #ffa84b 99.99%\n );\n color: #ffffff;\n text-decoration: none;\n font-size: 24px;\n font-weight: 600;\n border-radius: 10px;\n position: relative; // relative position is important to place shine properly\n overflow-x: hidden; // overflow is important, to hide animation outside the button\n}\u003C/code>\u003C/pre>\u003Cp>From CSS code above, it's important to add \u003Ci>overflow\u003C/i> and \u003Cb>position\u003C/b> properties. \u003Cb>Position\u003C/b> will help to place animation properly, and \u003Cb>overflow\u003C/b> will hide animation outside the button.\u003C/p>\u003Cp>Finally, let's add our \"shine\" and an animation for it. I'll make \"shine\" from pseudo-element (::before in this case)\u003C/p>\u003Cpre>\u003Ccode>.button::before {\n content: '';\n position: absolute;\n top: 0;\n height: 100%;\n width: 45px;\n transform: skewX(-45deg);\n left: -150%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.6)\n );\n animation: shineAnimation 3s infinite linear;\n}\n\n@keyframes shineAnimation {\n 0% {\n left: -150%;\n }\n 100% {\n left: 150%;\n }\n}\u003C/code>\u003C/pre>\u003Cp>That's all. You can play with pseudo-element and animation to configure effect like you want. Here is a result.\u003C/p>\u003Cdiv class=\"button-shine__wrapper\">\n \u003Ca href=\"#\" class=\"button-shine\">Button\u003C/a>\n\u003C/div>\n\n\n\u003Cstyle>\n.button-shine__wrapper {\n height: 100px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.button-shine {\n margin-top: 20px;\n color: #fff !important;\n padding: 20px 80px;\n background: linear-gradient(\n 90deg,\n #ff5e69 44.79%,\n #ff8a56 71.87%,\n #ffa84b 99.99%\n );\n color: #ffffff;\n text-decoration: none;\n font-size: 24px;\n font-weight: 600;\n border-radius: 10px;\n position: relative;\n overflow-x: hidden;\n}\n\n.button-shine::before {\n content: '';\n position: absolute;\n top: 0;\n height: 100%;\n width: 45px;\n transform: skewX(-45deg);\n left: -150%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.6)\n );\n animation: shineAnimation 3s infinite linear;\n}\n\n@keyframes shineAnimation {\n 0% {\n left: -150%;\n }\n 100% {\n left: 150%;\n }\n}\n\u003C/style>",{"time":218,"blocks":219,"version":84},1732123686547,[220,224,228,232,236,240,244,248,252,256,260,264],{"id":221,"type":20,"data":222},"Tc0k5U1XTK",{"text":223},"Hi everyone, welcome to my website. In this quick and easy tutorial, I'll show you how to create a shine animation for any element of your website, \u003Cb>using only pure HTML and CSS\u003C/b>, no scripts needed. In the article, I'll implement animation for a button, but you can apply this to almost any element on your website.",{"id":225,"type":20,"data":226},"jAY1czz5jg",{"text":227},"If you want just to copy and paste the code, or to experiment with it, here is a \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/PoMVXvR\" target=\"_blank\" rel=\"nofollow\">codepen\u003C/a> I created with this feature.",{"id":229,"type":25,"data":230},"z5W9lzKbXh",{"text":231,"level":28},"Creating CSS shine animation effect",{"id":233,"type":20,"data":234},"ivkIq9jlmO",{"text":235},"First things first, let's create an element, to which we will add our shine animation. In my case, I'll create a link, that will play a role of button.",{"id":237,"type":35,"data":238},"nL3Zv6JiBq",{"code":239},"\u003Ca href=\"#\" class=\"button\">Button\u003C/a>",{"id":241,"type":20,"data":242},"MMJQlMWyqf",{"text":243},"Next lets add some styles, to make button looks more fancy.",{"id":245,"type":35,"data":246},"cuYRzaLh__",{"code":247},".button {\n padding: 20px 80px;\n background: linear-gradient(\n 90deg,\n #ff5e69 44.79%,\n #ff8a56 71.87%,\n #ffa84b 99.99%\n );\n color: #ffffff;\n text-decoration: none;\n font-size: 24px;\n font-weight: 600;\n border-radius: 10px;\n position: relative; // relative position is important to place shine properly\n overflow-x: hidden; // overflow is important, to hide animation outside the button\n}",{"id":249,"type":20,"data":250},"ZWtlOsh9g5",{"text":251},"From CSS code above, it's important to add \u003Ci>overflow\u003C/i> and \u003Cb>position\u003C/b> properties. \u003Cb>Position\u003C/b> will help to place animation properly, and \u003Cb>overflow\u003C/b> will hide animation outside the button.",{"id":253,"type":20,"data":254},"MZ3RwaQUhD",{"text":255},"Finally, let's add our \"shine\" and an animation for it. I'll make \"shine\" from pseudo-element (::before in this case)",{"id":257,"type":35,"data":258},"jAvb23Q3H9",{"code":259},".button::before {\n content: '';\n position: absolute;\n top: 0;\n height: 100%;\n width: 45px;\n transform: skewX(-45deg);\n left: -150%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.6)\n );\n animation: shineAnimation 3s infinite linear;\n}\n\n@keyframes shineAnimation {\n 0% {\n left: -150%;\n }\n 100% {\n left: 150%;\n }\n}",{"id":261,"type":20,"data":262},"4D-glEr7KT",{"text":263},"That's all. You can play with pseudo-element and animation to configure effect like you want. Here is a result.",{"id":265,"type":201,"data":266},"1KdJK1Knsz",{"html":267},"\u003Cdiv class=\"button-shine__wrapper\">\n \u003Ca href=\"#\" class=\"button-shine\">Button\u003C/a>\n\u003C/div>\n\n\n\u003Cstyle>\n.button-shine__wrapper {\n height: 100px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.button-shine {\n margin-top: 20px;\n color: #fff !important;\n padding: 20px 80px;\n background: linear-gradient(\n 90deg,\n #ff5e69 44.79%,\n #ff8a56 71.87%,\n #ffa84b 99.99%\n );\n color: #ffffff;\n text-decoration: none;\n font-size: 24px;\n font-weight: 600;\n border-radius: 10px;\n position: relative;\n overflow-x: hidden;\n}\n\n.button-shine::before {\n content: '';\n position: absolute;\n top: 0;\n height: 100%;\n width: 45px;\n transform: skewX(-45deg);\n left: -150%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.6)\n );\n animation: shineAnimation 3s infinite linear;\n}\n\n@keyframes shineAnimation {\n 0% {\n left: -150%;\n }\n 100% {\n left: 150%;\n }\n}\n\u003C/style>","/uploads/posts/2024/11/13/pure-css-shind-animation.jpg",34,[271],{"_id":90,"name":91,"slug":92,"description":93,"types":272,"createdAt":95,"__v":96},[86],1727280437729,{"message":5,"tags":275},[276],{"_id":90,"name":91,"slug":92,"description":93,"types":277,"createdAt":95,"__v":96},[86],["Reactive",279],{"$snuxt-i18n-meta":280,"$smodal":281,"$snotifications":283},{},{"name":282},null,[],["Set"],["ShallowReactive",286],{"$XcIb6EDU8P":-1,"$5K23LhbIPt":-1},"/tutorials/tags/css/"]