CSS Houdini to standard css - border animation

For Joomla! 4.x Coding related discussions, you could also use: http://groups.google.com/group/joomla-dev-general

Moderators: ooffick, General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
antarey
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Tue Jan 31, 2012 9:45 am

CSS Houdini to standard css - border animation

Post by antarey » Mon Sep 25, 2023 8:23 am

I found an example
It works great on codepen

Code: Select all

<div class="nsr-border-anim"></div>

Code: Select all

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
body {
  background: #000;
  display: grid;
  place-items: center;
  min-height: 100vh;
}
.moving-border {
  width: 200px;
  height: 300px;
  position: relative;
  background: #111;
  padding: 4px;
}
.moving-border::before,
.moving-border::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  z-index: -1;
  background: linear-gradient(var(--angle), 
    #032146,  #C3F2FF, #b00);
  animation: rotate 10s linear infinite;
}
.moving-border::after {
  filter: blur(10px);
}
@keyframes rotate {
  0%     { --angle: 0deg; }
  100%   { --angle: 360deg;
  }
}
BUT! - @property - This is an experimental technology - The @property CSS at-rule is part of the CSS Houdini.
This technology does not work in Joomla 4, not all browsers support it.
Is it possible to translate this experimental technology into standard css?

SharkyKZ
Joomla! Hero
Joomla! Hero
Posts: 2846
Joined: Fri Jul 05, 2013 10:35 am
Location: Parts Unknown

Re: CSS Houdini to standard css - border animation

Post by SharkyKZ » Mon Sep 25, 2023 8:48 am

Codepen link? To my understanding, this needs to be accompanied with JS code to work.

antarey
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Tue Jan 31, 2012 9:45 am

Re: CSS Houdini to standard css - border animation

Post by antarey » Mon Sep 25, 2023 8:53 am

SharkyKZ wrote:
Mon Sep 25, 2023 8:48 am
Codepen link? To my understanding, this needs to be accompanied with JS code to work.
https://codepen.io/Mahe76/pen/PoyWvXX
JS code not use

antarey
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Tue Jan 31, 2012 9:45 am

Re: CSS Houdini to standard css - border animation

Post by antarey » Mon Sep 25, 2023 8:55 am

Sorry, I made an error in the html

Code: Select all

<div class="moving-border"></div>

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1548
Joined: Tue Jun 30, 2020 12:17 pm

Re: CSS Houdini to standard css - border animation

Post by Pavel-ww » Mon Sep 25, 2023 4:12 pm

antarey wrote:
Mon Sep 25, 2023 8:55 am
Sorry, I made an error in the html

Code: Select all

<div class="moving-border"></div>
Hi. Replace part of code
from...

Code: Select all

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
...to

Code: Select all

:root {
--angle: 0deg;
}


Post Reply

Return to “Joomla! 4.x Coding”