Is it possible to apply CSS animations to manipulate HTML attributes?

I'm exploring how to animate an HTML element's attribute using CSS and looking for guidance.

While I am aware that you can retrieve an attribute using the attr() CSS function, I am unsure about how to modify it. Specifically, I am attempting to animate the gradientTransform attribute of my svg element. I attempted to accomplish this using JavaScript, but I am unsure how to achieve the same infinite animation effect as in CSS.

<defs>
  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(65)">
     <stop offset="0%" stop-color="hsl(220, 60%, 60%)" stop-opacity="1" />
     <stop offset="100%" stop-color="hsl(280, 60%, 60%)" stop-opacity="1" />
  </linearGradient>
</defs>

My goal is to continuously rotate (alter) the gradientTransform attribute mentioned above.

javascripthtmlcssattributescss-animations

Answer №1

function createAnimatedGradient() {
  let angle = 0;
  const gradient = document.getElementById('gradient');

  function adjustGradient() {
    angle = (angle + 1) % 360;
    gradient.setAttribute('gradientTransform', `rotate(${angle})`);
    requestAnimationFrame(adjustGradient);
  }

  adjustGradient();
}

createAnimatedGradient();
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" gradientTransform="rotate(0)">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="100" height="100" fill="url(#gradient)" />
</svg>

If you wish to achieve the same effect with only CSS you can't do it directly on svg but here's a workaround:

  @keyframes gradientBackground {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .gradient-container {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, blue, red);
    background-size: 400% 400%;
    animation: gradientBackground 5s ease infinite;
    position: relative;
    overflow: hidden;
  }

  svg {
    position: absolute;
    width: 100%;
    height: 100%;

  }


  .transparent-path {
    fill: none;
    stroke: white;
  }
<div class="gradient-container">
  <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <circle cx="60" cy="60" r="50" class="transparent-path"/>
  </svg>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting issue with asp.net jquery datepicker functionality

Having recently delved into the world of JavaScript and jQuery, I'm encountering some issues that I can't seem to resolve. My gut feeling is that the problem lies in the reference to the jQuery files not working properly, but I could be mistaken. ...

javascriptjqueryasp.net

Received an error during the module.exports = client process

In my commands folder, I have multiple files that contain slash commands. I am trying to import the client instance from index.js to another file, but when I use module.exports = client;, it ends up executing the entire index.js script unintentionally. I ...

javascriptnode.jsmodulediscord.jsclient

Troubleshooting CSS Carousel Navigation Problems

{% extends 'shop/basic.html' %} {% load static %} {% block css %} .col-md-3 { display: inline-block; margin-left:-4px; } .carousel-indicators .active { background-color: blue; } .col-md-3 img{ width: 227px; ...

htmlcssdjangocarousel

Utilizing JavaScript to iterate through objects retrieved via Ajax calls

Recently, I've been diving into the world of Javascript and delving deep into AJAX. Utilizing Vanilla JS along with simple AJAX, my current task involves fetching a user object from a URL based on the user's input ID. Despite attempting to use .d ...

javascriptajax

The data from the method in the Vue.js component is not displaying as expected

Currently diving into Vue.JS (2) and exploring the world of components. My current challenge involves using a component within another component, grabbing data from a data method. Here's what I have so far: HTML <div id="root"> <h1> ...

javascriptvue.jsvuejs2vue-component

Developing a feature that allows users to switch between different sets of information

I'm currently exploring a new project and attempting to design a toggle that switches between monthly and annual payments based on the user's selection, much like the functionality found here: . At present, I have implemented two sets of price c ...

javascripthtmljquerycssvue.js

Issue with Bootstrap alignment on the right side

Just finished creating my 'navbar' in bootstrap, but I'm having trouble aligning my unordered list to the right. It's staying in the middle no matter what I try. Can someone please help? Feeling really confused... HTML: <div class= ...

javascripthtmlcsstwitter-bootstrap

Achieving the perfect balance: Centering and fitting an image into a div without any loss

As I delve into learning CSS, I keep stumbling upon solutions that are almost there for what should be a simple task. Being at a very basic stage of my learning journey, I am struggling with figuring things out. My current challenge involves placing one i ...

csshtmlcenteringstretching

Trouble with mouseout listener in Wordpress causing Google Map to malfunction

Having trouble integrating a map into my WordPress site using the Google Maps API v3. The issue I am facing is that the listener assigned to the mouseout event is not functioning properly. I have copied and pasted the code from another website where it was ...

javascriptwordpressgoogle-mapsscope

What is the reason behind the momentary functionality of v-for?

I'm facing a strange issue while working with Vue.js. I'm not sure if the problem lies with my code or if it's a bug in the framework. Here's the scenario: When I use v-for with a comma before it (v-bind), there are no errors but nothi ...

javascriptvue.jsvuejs2vue-component

"Angular fails to retrieve any data from JSON API, returning a blank response

My ng-repeat function is not returning anything, and as a beginner in Angular, I am struggling to identify the error. Despite thorough error checking, I can't seem to figure out what's going wrong here. (function() { var app = angular.module( ...

javascriptangularjspromise

Showing ASP code within a DIV element (inline)

Working on setting up a 'shopping cart' feature on our website, but running into some issues with the ASP code. Does anyone have any advice to offer? In the image below, you can see that when items are added to the cart, the 'total' is ...

cssasp-classic

Only the initial TinyMCE editor that was added dynamically is visible, the rest are not showing

I am currently developing a javascript application that will showcase a real-time discussion thread. The app will regularly communicate with the server to fetch new data and display it on the page. To enable users to post comments and replies, we have deci ...

javascriptjquerytinymcewysiwygtinymce-4

What issues are present in this PHP code?

Can you identify the issue in this PHP code? I am using Netbeans 8.1 and whenever I type $ _GET, an error occurs <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> ...

phphtml

The color of the top bar remains unchanged when hovered over

I am struggling to design my personal website, and I can't seem to get the top bar to change color on hover. If you believe you have a solution, please provide your answer. index.html appears to be functioning properly, but perhaps additional adjustm ...

htmlcss

The chai property "matchSnapshot" is not valid

https://i.sstatic.net/4wgqq.png After following the instructions provided at this link, I am now in the process of writing basic Jest tests for my React application that uses the Create-React-App starter kit. I came across a recommendation mentioned here ...

javascriptreactjsunit-testingjestjschai

Using AJAX to inject JSON data from PHP into Edge Animate

For a school assignment, I am currently working on a project using edge animate. My objective is to import data from a database hosted on my school's webspace and incorporate it into the edge animate project. Despite researching online for a solution ...

javascriptphpjqueryajaxadobe-edge

Tips for handling transparent areas during a hover event

Is there a way to make only the rhombus image respond to hover events? I want to exclude the transparent area, as shown in this picture. <img src='http://s30.postimg.org/xpd6gwla9/1_Copy.jpg' id="first"> #first:hover { -moz-box-shadow ...

htmlcss

Select three unique numbers at random from the total number of elements in the array

I currently possess an array containing a variety of objects. At present, there are 21 objects in this array, although this number is subject to change. To iterate through the array and generate the necessary content, I am implementing the following code ...

javascriptarraysloopsrandom

Tips for accessing child elements within an Angular component

I'm struggling to get a reference of child elements within a component. I have experimented with ElementRef, TemplateRef, QueryList, ViewChild, ViewChildren, ContentChild, and ContentChildren without success. <app-modal> <section #referenc ...

javascriptangulartypescript