Creating dynamic animations for composite SVGs with multiple paths using only CSS

I'm attempting to create an animation for a specific path within an SVG that contains multiple paths. My goal is to have the arrow path remain in its position while rotating 180 degrees around its own center.

Previous solutions on Stack Overflow recommend using transform-origin, but those tricks don't seem to be working.

SVG Snippet

.arrow{
    animation: inboxToOutbox 5s infinite
}

@keyframes inboxToOutbox {
    
    50% {
        
        
        transform: rotate(-180deg);
    }
}
<svg width ='50px' height='50px' viewBox="166.588 216.37 99.996 85.641" xmlns="http://www.w3.org/2000/svg">
  <path id = "box" style={{fill:"#ffff"}} d="M 99.404 68.401 C 98.855 67.087 97.904 65.946 96.719 65.222 L 80.784 54.5 L 70.968 54.5 L 87.97 67.543 L 70.247 67.543 C 69.701 67.543 69.255 67.842 68.996 68.292 L 68.965 68.335 L 69.042 68.227 L 64.964 79.383 L 35.042 79.383 L...
  
  <path class='arrow' style={{fill:"#ffff"}} d="M 226.109 238.851 L 242.609 238.851 L 216.609 264.011 L 190.609 238.851 L 207.109 238.851 L 207.258 216.37 L 226.698 216.665 L 226.109 238.851 Z">
  
    </path>
  
</svg>

I would like to implement an animation where the arrow moves from inbox to outbox when hovered over by rotating at its own center.

csssvgcss-transforms

Answer №1

To achieve the desired effect, it is recommended to use transform-origin: center. However, when working with SVG, this may not produce the expected results. It is advised to also incorporate transform-box: fill-box.

.arrow {
  transform-box: fill-box;/* view-box default value */
  transform-origin:center center;
  animation: inboxToOutbox 5s infinite
}

@keyframes inboxToOutbox {
  50% {
    transform: rotate(-180deg);
  }
}
<svg width='50px' height='50px' viewBox="166.588 216.37 99.996 85.641" xmlns="http://www.w3.org/2000/svg">
  <path id = "box" d="M 99.404 68.401 C 98.855 67.087 97.904 65.946 96.719 65.222 L 80.784 54.5 L 70.968 54.5 L 87.97 67.543 L 70.247 67.543 C 69.701 67.543 69.255 67.842 68.996 68.292 L 68.965 68.335 L 69.042 68.227 L 64.964 79.383 L 35.042 79.383 L 30.963 68.225 L 31.01 68.292 C 30.751 67.84 30.221 67.538 29.676 67.54 L 14.983 67.543 L 12.036 67.543 L 29.04 54.5 L 19.222 54.5 L 3.311 65.208 C 2.127 65.932 1.153 67.086 0.604 68.401 C 0.017 69.697 -0.151 71.134 0.151 72.434 L 2.957 87.793 C 3.297 89.085 4.141 90.31 5.279 91.127 C 6.392 91.987 7.819 92.497 9.24 92.5 L 90.788 92.5 C 92.209 92.497 93.615 91.987 94.729 91.127 C 95.871 90.305 96.702 89.139 97.039 87.854 L 99.85 72.462 C 100.154 71.163 99.992 69.697 99.404 68.401 Z" transform="matrix(1, 0, 0, 1, 166.584211, 209.511274)"/>
  <path class='arrow' d="M 226.109 238.851 L 242.609 238.851 L 216.609 264.011 L 190.609 238.851 L 207.109 238.851 L 207.258 216.37 L 226.698 216.665 L 226.109 238.851 Z" />
</svg>

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

Tips for rearranging button placements by utilizing multiple owl carousels across various webpages

I have successfully implemented two owl carousels on my Shopify website, and they are both functioning properly. However, I am facing an issue with the navigation buttons on the second page. The navigation buttons seem to be picking up a style that I had i ...

javascripthtmlcssshopifyowl-carousel

What methods can I use to visually distinguish external links from those on my website?

Can CSS be used to show users which links are external? ...

css

Error: Unable to access the property 'fontSize' as it is undefined

<!DOCTYPE HTML> <html> <head> <title>Interactive Web Page</title> <link id="mycss" rel="stylesheet" href="mycss.css"> <script> function resizeText(size) { va ...

javascripthtmlcssdom

Content in the div stretches when viewed on a mobile device

I have created a responsive page that is centered, but when viewed on a mobile window, I want the text to stretch and remove any white space on the sides. How can I achieve this using Bootstrap 4? hr { border: 0; height: 1px; ba ...

htmlcssbootstrap-4

Ways to effectively conceal an HTML div element with CSS or JavaScript

Is there a way to hide the div element that is nested inside a bootstraps radio or checkbox container using jquery? I'm unable to upload an image, but here is a preview: http://prntscr.com/6wrk2m <style> .my-radio{ border: 1px solid #F0F; } &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

Incorporating CSS styling to specific elements

I am facing an issue with a CSS rule that looks like this: div#tabstrip.tabstrip-vertical.k-widget.k-header.k-tabstrip div#tabstrip-4.k-content.k-state-active{ background-image: url("http://wwww.example.com/logo2.png") !important; background-posit ...

htmlcss

Having trouble with CSS basics? Seeing properties change across multiple classes?

My CSS skills are still in the beginner stage and I am currently struggling to troubleshoot an issue with my code. The HTML: <div id="loginForm"> <span class="dottedLink"><a href="resetlogin">Recover login details</a></span ...

htmlcss

flip it around - move up

Hey there, check out this snippet of HTML code I have: <style type="text/css"> .container{ width: 450; height: 400; border:1px solid; border-radius: 6px; background: #000; } .name{ border- ...

jqueryhtmlcss

Keep duplicating a single object until it fills up the entire screen

Is there a way to make an HTML/CSS element repeat until it covers the entire screen height, without repeating it indefinitely? #container{ height: 100vh; width: 100vw; } .dotts{ background-color: yellow; border-radius: 50%; height: 20px; width: 20p ...

javascriptjqueryhtmlcss

How to perfectly align a full-width div with a div of specific width

Consider this scenario: .d1 { width: 100px; float: left; } .d2 { width: auto; float: left; } <div class="d1">Fixed Content</div> <div class="d2">This content should expand to fill the rest of the page vertically.</div> This setu ...

csshtml

Unable to modify zoom settings in iOS using javascript

My website is 1000x820 in size, but please don't ask me about responsive web design. Here's the viewport setup: <meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no"> When accessed on an iPhone SE w ...

javascripthtmlioscssweb

"Divs are now linked and drag as one cohesive unit instead of

As I was experimenting with making images draggable and resizable, I encountered a small issue. When I attempted to drag two or more images, they would merge into one large draggable object instead of remaining separate. My goal was to make each image drag ...

javascriptjqueryhtmlcssjquery-ui

If viewed on a mobile device, separate the array (indexed list) into two rows

Currently, I am working on my Ionic project where I am trying to implement an indexed list horizontally instead of vertically. While the list looks good as it is now, I want to make sure it supports smaller screen devices too by splitting the list into two ...

javascripthtmlcssangularjsionic-framework

What is the best way to test out CSS effects before they go live

I enjoy customizing the CSS, like the posted dates on my portfolio How can I make these changes without affecting the public view of the website? One suggestion from a forum was to use .date {visibility:hidden;} ...

csswordpressdateweb

Notification during image loading

I have successfully integrated the Nivo slider on my website, however, I am encountering a minor issue. Whenever the images are loading, it causes the footer to shift upwards which affects the overall look of the site. Is there a simple solution to add a m ...

jqueryhtmlcssimageslider

Using JavaScript to open links in a new tab with the target

document.getElementById("mahacareer").onclick = function () { window.open("http://www.mahacareermitra.in", '_blank'); }; <a href="" id="mahacareer">Access the portal</a> Hi there, I am looking to have the link above open in a new tab ...

javascriptjqueryhtmltwitter-bootstrapcss

What is the best way to design a group of radio buttons with corresponding labels at the top

I'm looking to create a structure like this in HTML: https://i.sstatic.net/wLcZs.png Does anyone know how I can achieve this layout so that the labels are aligned properly with the radio buttons? My main challenge is getting the horizontal labels ab ...

htmlcssradio-buttonsemantic-ui-react

Unslider: Ensure images stay centered even on smaller screen resolutions

Utilizing Unslider in a recent project from . Managed to align the slider halfway, but facing an issue with off-center slides on resolutions of 1920px and lower. The image width is 3940px. Attempted to implement the code snippet from this answer like so: ...

javascriptjqueryhtmlcssunslider

Javascript onclick events failing to toggle video play/pause functionality

In my website, I have background music and a background video (webm format) embedded. I am facing an issue with making play/pause buttons in the form of png images work for both the video and the music. The background music is added using the embed tag wi ...

javascriptjqueryhtmlcss

angular material drag and drop triggers a callback once the css transition has completed

I have successfully implemented a list of elements that can be dragged and dropped using Angular Material's drag and drop feature, similar to the tutorial available at this link. In my implementation, I have a "drop(event)" function that not only mov ...

cssangularangular-materialdrag-and-drop