All Questions
14
questions
0
votes
1
answer
60
views
Run animation again on hover
I created an anim https://designordering.com/resume/. I would like to run the animation again on hover.
.circle1 {
fill: none;
stroke: #000;
stroke-width: 5px;
stroke-dasharray: 345;
...
- 55
1
vote
2
answers
303
views
SVG on hover not taking Transition
I am trying to animate a SVG where I need to change path of the svg. While I am hovering svg at that time path changes but the Transition on hover not working. I need to make a smooth transition on ...
- 228
0
votes
2
answers
138
views
Infinite SVG animation smoothly retrieve initial state on hover
I would like my infinite svg animation to pause on its initial or final state when I hover it. I tried with JS to remove the class or in CSS to set animation-iteration-count: unset; on hover or set ...
- 3
2
votes
2
answers
190
views
SVG Animation - CSS Hover Animation For SVG From The Center
I have done this effect in GSAP here is the Codepen as a reference:
https://codepen.io/whitelionx/full/vYGQqBZ
const svgs = document.querySelectorAll("svg");
svgs.forEach((svg) => {
...
- 33
2
votes
1
answer
306
views
SVG circle animation on hover doesn't work
Atm im trying to recreate the SVG circle animation when you hover over the navigation menu buttons as shown on this site: https://5scontent.com/. On my site the circle appears when refreshing and ...
2
votes
1
answer
37
views
Hover animation 'slidedown' on the clipped path text-bottom is not working. Can you help me?
The text on the bottom of the logo has a clip-path and maybe because of that i can't trigger the hover animation. I've already changed the called classes of the elements and no effect. The animation ...
- 25
1
vote
1
answer
600
views
CSS active selector (animation)
can someone look at this css code please. "hover" function working fine, but "active" not. When I click on the Logo nothing happend. What is wrong in this code?
.splash-logo {
background: ...
- 77
2
votes
0
answers
95
views
Starting a SVG animation with keyframes using "begin" property
I'm actually learning SVG in order to import a vector animation I did in Flash inside a website, then integrate some "interactivity" (with the SVG property begin="mouseover").
So first, here is a ...
- 39
0
votes
1
answer
41
views
How to make an SVG self-animate
My website home page http://creativespectrums.com/ contains an SVG made out of concentric circles. I would like to bring life to it.
Is it possible to make it self-animate with a random pattern? I ...
- 103
0
votes
1
answer
3k
views
Play SVG animation while hovering over button
So I got this SVG that already has an animation included in the svg itself, now my question is how I would start the animation while hovering over the svg icon, the svg already has the id's for each ...
- 3
0
votes
0
answers
101
views
svg hover animation fallback / create hover animate using snap.svg
I am new to svg / svg animation.
I studied that it's better to have fallback for svg.
However, if I want to develop svg animation, it seems so hard for me to use .svg instead of the whole path thing ...
- 343
2
votes
1
answer
3k
views
How to Animate the fill attribute of inline SVG on mouseover/mouseout (SMIL)
I have created a simple inline SVG.
Using SMIL I have tried to animate the fill attribute to pink for all paths upon mouseover of the parent SVG id.
On mouseout I would like the fill to always reset....
- 944
1
vote
1
answer
1k
views
Animating SVG image mask on hover
I have an JPG with an SVG mask:
<img src="thumb.jpg" class="thumb">
.thumb {
mask: url('mask.svg#mask');
-webkit-mask-image: url('mask.svg');
}
So far, so good.
What I would like is for ...
- 6,848
1
vote
1
answer
139
views
d3 hover css stops working when the chart stops "ticking"
This fiddle demonstrates the problem with hover. Basically, while the graph is animating, my hover classes work fine. But once it settles, :hover stops working. It's also not just pseudo CSS ...
user736893
