The rotating animation is not compatible with Chrome browser

Question

The rotating animation is not compatible with Chrome browser

I'm having trouble with an animation that works in Firefox but not in Chrome. Despite trying multiple solutions, I have been unable to get it to work.

Here is the code I am using:

#path {
    animation-name: turn;
    transform-origin: 50px 50px;

    -webkit-animation: turn;
    -webkit-transform-origin: 50px 50px;

    -webkit-animation: turn 2s infinite;
    animation: turn 2s infinite;
}


@-webkit-keyframes turn {
    100% {
        -webkit-transform: rotate(1080deg);
    }
}
@keyframes turn {
    100% {
        transform:rotate(1080deg);
    }
}

<svg viewbox="0 0 100 100" id="svg">
                    <defs>
                        <linearGradient id="gradient">
                            <stop offset="26%" stop-color="#632ef4"/>
                            <stop offset="100%" stop-color="#12ead5"/>
                        </linearGradient>
                    </defs>

                    <path id="path" stroke-linecap="round" stroke-width="15" stroke="url(#gradient)" fill="none" stroke-dasharray="200, 250.2" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80" transform="scale(1,1) translate(0,0)">
                    </path>
                </svg>

Can someone please assist me? What could be the issue?

-- Edit : After some testing, I discovered that I can actually rotate the object by entering a value less than 360 degrees. I am confused as to why I cannot rotate it 1080 degrees like I can in Firefox...

css css-animations webkit-animation

Answer 1

Answer №1

Important Update

Following the inclusion of the SVG in your answer, I made some minor adjustments to your CSS code. The modifications now direct to the outer id (#svg) instead of the original #path id.

#svg {
  animation-name: turn;
  transform-origin: 50px 50px;
  animation: turn 2s infinite;
  width: 100px;
  height: 100px;
}

@keyframes turn {
  100% {
    transform: rotate(1080deg);
  }
}

<svg viewbox="0 0 100 100" id="svg">
  <defs>
    <linearGradient id="gradient">
      <stop offset="26%" stop-color="#632ef4" />
      <stop offset="100%" stop-color="#12ead5" />a
    </linearGradient>
  </defs>
  <path class="rotate" id="path" stroke-linecap="round" stroke-width="15" stroke="url(#gradient)" fill="none" stroke-dasharray="200, 250.2" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">
  </path>
</svg>

Link to jsFiddle

The provided markup appears to be functioning correctly. It is worth noting that the -webkit- prefix is no longer necessary for the properties you are utilizing, as these have been universally adopted by modern browsers for an extended period.

#path {
  animation-name: turn;
  transform-origin: 50px 50px;
  animation: turn 2s infinite;
  width: 100px;
  height: 100px;
  background-color: red;
}

@keyframes turn {
  100% {
    transform: rotate(1080deg);
  }
}

<div id="path"></div>

Link to jsFiddle

Answer 2

Important Update

Following the inclusion of the SVG in your answer, I made some minor adjustments to your CSS code. The modifications now direct to the outer id (#svg) instead of the original #path id.

#svg {
  animation-name: turn;
  transform-origin: 50px 50px;
  animation: turn 2s infinite;
  width: 100px;
  height: 100px;
}

@keyframes turn {
  100% {
    transform: rotate(1080deg);
  }
}

<svg viewbox="0 0 100 100" id="svg">
  <defs>
    <linearGradient id="gradient">
      <stop offset="26%" stop-color="#632ef4" />
      <stop offset="100%" stop-color="#12ead5" />a
    </linearGradient>
  </defs>
  <path class="rotate" id="path" stroke-linecap="round" stroke-width="15" stroke="url(#gradient)" fill="none" stroke-dasharray="200, 250.2" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">
  </path>
</svg>

Link to jsFiddle

The provided markup appears to be functioning correctly. It is worth noting that the -webkit- prefix is no longer necessary for the properties you are utilizing, as these have been universally adopted by modern browsers for an extended period.

#path {
  animation-name: turn;
  transform-origin: 50px 50px;
  animation: turn 2s infinite;
  width: 100px;
  height: 100px;
  background-color: red;
}

@keyframes turn {
  100% {
    transform: rotate(1080deg);
  }
}

<div id="path"></div>

Link to jsFiddle

Answer 3

Answer №2

After troubleshooting, I discovered that the issue arises because the browser lacks information about the initial degree of rotation transition. To resolve this, simply specify the starting rotation degree as 0 to instruct the browser. By doing so, the browser will handle negative values accurately.

@keyframes spin {
0% { 
    transform: rotate(0)
}
100% {
    transform:rotate(1080deg);
}
}

I hope this explanation proves helpful.

Answer 4

After troubleshooting, I discovered that the issue arises because the browser lacks information about the initial degree of rotation transition. To resolve this, simply specify the starting rotation degree as 0 to instruct the browser. By doing so, the browser will handle negative values accurately.

@keyframes spin {
0% { 
    transform: rotate(0)
}
100% {
    transform:rotate(1080deg);
}
}

I hope this explanation proves helpful.

Answer 5

Answer №3

Fixing the issue involves removing the transform attribute from the path.

transform="scale(1,1) translate(0,0)"

does not actually have any effect on the transformation.

svg{
  display:inline-block;
  height:10em;

}

.rotate{
     animation-name: turn;
    transform-origin: center;
    animation: turn 2s infinite;
}



@keyframes turn {
    100% {
        transform:rotate(1080deg);
    }
}

<svg viewbox="0 0 100 100" id="svg">
  <defs>
    <linearGradient id="gradient">
      <stop offset="26%" stop-color="#632ef4" />
      <stop offset="100%" stop-color="#12ead5" />
    </linearGradient>
  </defs>
  <path class="rotate" id="path" stroke-linecap="round" stroke-width="15" stroke="url(#gradient)" fill="none" stroke-dasharray="200, 250.2" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80" >
  </path>
</svg>

Answer 6

Fixing the issue involves removing the transform attribute from the path.

transform="scale(1,1) translate(0,0)"

does not actually have any effect on the transformation.

svg{
  display:inline-block;
  height:10em;

}

.rotate{
     animation-name: turn;
    transform-origin: center;
    animation: turn 2s infinite;
}



@keyframes turn {
    100% {
        transform:rotate(1080deg);
    }
}

<svg viewbox="0 0 100 100" id="svg">
  <defs>
    <linearGradient id="gradient">
      <stop offset="26%" stop-color="#632ef4" />
      <stop offset="100%" stop-color="#12ead5" />
    </linearGradient>
  </defs>
  <path class="rotate" id="path" stroke-linecap="round" stroke-width="15" stroke="url(#gradient)" fill="none" stroke-dasharray="200, 250.2" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80" >
  </path>
</svg>

The rotating animation is not compatible with Chrome browser

Answer №1

Important Update

Answer №2

Answer №3

Similar questions

Volume slider missing on Handel?

Utilize React Styled Components to seamlessly unify the styles of two different components

Having trouble with your WordPress child theme's formatting?

Conceal the pseudo element when clicked

Ways to customize the design of a bootstrap button using jQuery

Can a 1D array be utilized to create a 2D grid in React?

Why are my Chrome Div regions failing to expand to their full width?

What are the steps to create a dynamic navigation bar in React without encountering hydration issues?

Implementing conditional statements with Bootstrap alerts

IE8 experiencing issues with colgroup tag

Looking for assistance with text alignment?

I noticed that my Stack Slider text is appearing blurry, and the navigation seems to be not looping properly

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

Ways to center your attention on the Textbox

Adjusting the navigation image as it passes through various div elements during scrolling

What are some ways to style CSS for links, such as a login button?

Utilizing JavaScript and Flexbox to generate a 16x16 grid within a div element

Arranging Bootstrap columns: Move center column to a new row for mobile devices

What is the best way to ensure a jQuery function runs on duplicated elements?

How can I position a vertically centered image to the left of a block paragraph using inline styles?