Currently, I have successfully animated an SVG file using the default svg functions like the following:
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 16 30"
to="360 16 30"
dur="3s"
repeatCount="indefinite"/>
However, I now want to apply the transformation only on hover.
You can view the code here: https://jsfiddle.net/g1todrkg/
Instead of relying on SMIL animations, a more future-proof approach is to use CSS for achieving the same effects.
animation-play-state: paused. :hover of the svg element, change the animation-play-state to running. The demo below demonstrates the usage of non-prefixed animation properties. To ensure consistency across browsers, adding browser prefixes is recommended.
#cogSmall,
#cogBig {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin:15.887px 29.88px;
animation-play-state: paused;
}
#cogSmall {
animation-duration: 3000ms;
transform-origin: 24.691px 35.778px;
animation-direction: reverse;
}
svg:hover #cogBig,
svg:hover #cogSmall {
animation-play-state: running;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}<svg version="1.1" id="team" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
<g class="idea" fill="#EFCC03">
<path d="M41.775,6.312c-3.415,0-6.181,2.651-6.181,5.921c0,3.885,2.696,4.875,2.696,7.136c0,0.558,0.426,1.078,1.067,1.461
c-0.134,0.11-0.209,0.233-0.209,0.361c0,0.172,0.137,0.334,0.369,0.474c-0.218,0.135-0.346,0.288-0.346,0.456
c0,0.167,0.13,0.326,0.353,0.462c-0.227,0.136-0.359,0.295-0.359,0.465c0,0.208,0.194,0.399,0.521,0.553
c-0.125,0.115-0.198,0.242-0.198,0.376c0,0.394,0.615,0.73...
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="360 24.69 35.778"
to="0 24.69 35.778"
dur="2s"
begin="hover.start"
end="hover.end"
repeatCount="indefinite"/>
hover over to trigger animation start and move out to trigger animation end
<animateTransform attributeName="transform"
additive="replace"
type="translate"
dur="0.24s"
keyTimes="0;.167;.333;.5;.667;.833;1"
values="12,22.05;12.084,22.104;12.088,22.078;12.128,22.07;12.068,22.071;12.05,22.05;12.05,22.05"
keySplines=".25 .5 .5 1;.25 .5 .5 1;.25 .5 .5 1;.25 .5 .5 1;.25 .5 .5 1;0 0 1 1"
calcMode="spline"
begin="mouseover"
fill="freeze"/>
I found that just using begin="mouseover" was sufficient for my needs.
(excluding "team." part)
According to @AlexEfremo's response on this thread, Firefox is more lenient when it comes to setting keyTimes incorrectly compared to Chrome and Edge.
Make sure not to include a semi-colon at the end of your keyTimes value, like this:
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="360 24.69 35.778"
to="0 24.69 35.778"
dur="2s"
begin="team.mouseover"
end="team.mouseout"
repeatCount="indefinite"
keyTimes="0; 0.5; 1" />
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="360 24.69 35.778"
to="0 24.69 35.778"
dur="2s"
begin="team.mouseover"
end="team.mouseout"
repeatCount="indefinite"
keyTimes="0; 0.5; 1;" /> <!-- pay attention to the ; at the end -->
To create a duplicate of the @keyframes animation {} and assign a new name, use @keyframes animation-hover {} for the hover effect.
Currently, we are in the process of developing a new website that utilizes HTML5. While everything validates correctly, we are encountering issues with the LESS stylesheets and Facebook tags. Particularly, Chrome's autofill feature is not functioning ...
After extensive research, I am starting to think that using multiple versions of the same JavaScript library on a single page is not possible (without utilizing jquery Can I use multiple versions of jQuery on the same page?, which I am not). However, I wan ...
After spending hours attempting to extract a specific data set for use with Scrapy in a web scraping project, here is the current python code: bedrooms_info = house_listing.css( '.search-results-listings-list__item-description__charact ...
My dilemma involves a piece of code that produces a random number ranging from 1 to 1000. This number is then saved as a session and sent to you via email where it needs to be entered into a form before submission. However, the issue arises when submitting ...
Currently, I'm in the process of implementing material design UI on a functioning web application. The application utilizes Nginx, PHP, and PostgreSQL. While I have proficiency in PHP and PostgreSQL to ensure the functionality (code composed in notepa ...
Here is the issue I am facing: I need my iFrame to adjust its size based on a div within it, but every attempt to retrieve the size of this div results in 0. var childiFrame = document.getElementById("myDiv"); console.log(childiFra ...
Currently, I am trying to implement a carousel in bootstrap, but I am facing two significant issues. The alignment of the carousel is vertical instead of horizontal (my div elements are stacking downwards). When I apply the float: left property, the carou ...
I have implemented the following code to convert an image to grayscale using Javascript. <body> <canvas id="myCanvas" width="578" height="400"></canvas> <script> function drawImage(imageObj) { var canvas = document.getElement ...
My idea involves creating a unique bullet list style with two specific features: a. A blue arrow image replacing the standard list icon b. Very subtle dotted borders above and below each list item. I am looking to incorporate this design into CKEditor t ...
Consider the following code snippet: It currently applies CSS classes up to red4, but I want to apply CSS classes up to red11. Additionally, the variable "size" in myData should be dynamic. For example, size could range from 0-20 // 0-100 // 0-10000, etc., ...
Could someone assist me in identifying the issue with this code that only displays the same image, tree.png, three times? var bankImages = ["troyano", "backup", "tree"]; jQuery.each( bankImages, function( i, val ) { $('#imagesCon ...
I currently have a CSV file located on a web server that is regularly updated with numeric and string data of varying lengths. I am seeking a solution to calculate the total byte values of each row when reading the file, as the byte count is crucial due ...
I am currently exploring the intricacies of the bootstrap grid system. My goal is to create a set of buttons that look like this: https://i.sstatic.net/V5meG.png Each button should expand to fill the width and height of its container. However, when a b ...
I want to have a video play as a pop-up when the user clicks a play button, while also fading out the background of the page. It should be similar to the way it works on this website when you click to watch a video. How can I achieve this? <div class=" ...
I created a custom BBCode for my PHP website to display tabbed content on a page. After testing the BBCode on a separate webpage and confirming there are no errors, I am facing an issue where the tabbed content is not showing up on the actual posting page. ...
Can anyone shed some light on why the Form Validation Bubble is showing up with a big offset in Google Chrome when trying to validate a form inside a jquery UI dialog? It seems to work fine when the javascript call creating the dialog is removed. Just want ...
Let's say, I want to use different CSS libraries for each of my components - Home, About, Contact. Would it be feasible to utilize material ui for Home, semantic ui for About, and bootstrap for Contact? If so, what is the process for incorporating t ...
Feeling a bit lost here. I've been attempting to connect my homepage to my stylesheet, but no matter how often I refresh the page, it just won't recognize the link. I'm diligently following the instructions from the guide I have, copying and ...
Encountering an issue with Three.js: I have created my own HTML user interface as a simple overlay. However, I am facing a problem where the mouse click does not reset when I interact with elements on this overlay. Specifically, when I click on the "Came ...
In my Angular project, I have designed a main layout using flex display with specific height and overflow settings. The main content div inside this layout has its own unique styling to ensure consistent appearance for any components inserted within it. By ...