css-animations Questions
7
Solved
I want to create an expand/collapse animation that's powered only by classnames (javascript is used to toggle the classnames).
I'm giving one class max-height: 4em; overflow: hidden;
and the oth...
Bioecology asked 16/4, 2013 at 4:37
6
Solved
I am trying to animate with CSS the a line through on a bit of text, but it's not actually animating, just going from hidden to displayed. Can anyone advise if what I'm trying is actually possible?...
Schaefer asked 28/3, 2016 at 17:31
2
Solved
The MDN animation documentation refers to animation type being discrete. What does this mean?
Evelyn asked 13/6, 2017 at 0:36
3
Solved
I am try to have the caret in the following rotate 180 degrees on click for my dropdown menu. In the solution Im trying to implement, it changes the class of the the caret to toggle-up or toggle-do...
Dentalium asked 29/6, 2015 at 6:5
3
I found a tutorial about creating a breath pacer using CSS:
The inhale and the exhale in the code are the same (4s). I want to control with the code the inhale, post-inhale hold, exhale, post exhal...
Barony asked 2/4, 2023 at 11:4
2
Solved
I want my div to return to its original position in reverse right after I stop hovering. But the return starts before I even begin to hover on the div and right after running the code.
I need the r...
Graduation asked 22/3, 2023 at 4:32
2
I was trying to make a "multi-row" sprite CSS animation (insipred by this: http://codepen.io/simurai/pen/vmhuJ), only to find that Firefox doesn't support background-position-x or -y.
The lack of ...
Schleiermacher asked 7/10, 2015 at 13:37
23
Solved
Something this simple should be easily accomplished, yet I'm pulling my hair out over how complicated it is.
All I want to do is animate the mounting & unmounting of a React component, that's ...
Ceremonious asked 15/10, 2016 at 21:10
2
I am getting [scss] } expected [css-rcurlyexpected] error in visual code for the commented line. Does anybody know why ?
@keyframes wordSlider {
$steps: -0%, -25%, -50%, -75%;
@for $index from 0...
Conchoid asked 4/2, 2019 at 18:6
10
Solved
I'm trying to have an ellipsis animate, and was wondering if it was possible with CSS animations...
So it might be like
Loading...
Loading..
Loading.
Loading...
Loading..
And basically just con...
Becca asked 22/10, 2012 at 15:36
12
Solved
I understand how to perform both CSS3 transitions and animations. What is not clear is when to use which.
For example, if I want to make a ball bounce, it is clear that animation is the way to go. ...
Squishy asked 14/12, 2013 at 17:28
6
Solved
I'm trying to shake an html element for my game.
I found this code here:
shake = function (sprite, magnitude = 16, angular = false) {
//A counter to count the number of shakes
var counter = 1;...
Aquarelle asked 1/5, 2016 at 3:59
6
Solved
I'm attempting to have three objects rotating around a circle. So far I've been able to get one object to spin around the circle. I am unable to get more than one without messing up the code. Could...
Pyromancy asked 18/8, 2016 at 14:21
14
Solved
Currently, I have this code:
@-webkit-keyframes blinker {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
.waitingForConnection {
-webkit-animation-name: blinker;
-webkit-animation-iteration-co...
Polivy asked 2/5, 2013 at 17:39
3
Solved
I can get media queries to work properly inside a regular styled-components component however when I attempted to use it in a keyframe (via import from styled-components) it does not seem to work a...
Eustashe asked 19/8, 2019 at 22:46
2
Solved
I'm using reactjs with material-ui styling, to create a dapp and have an image (circular in shape) which i want to spin continuously which customizable spin speed, maintaining a smooth flow. The sp...
Situs asked 19/2, 2019 at 3:56
2
Solved
Basically All the time I need to inspect how my CSS animation work.so is there way to inspect CSS animation in chrome dev tools?
Lyndsaylyndsey asked 14/8, 2022 at 16:46
3
Solved
See the following image:
https://i.sstatic.net/F3znK.png
See those transparent circles in the background? What i want to do is make them animate from the bottom up, and then manually jump down (o...
Heilungkiang asked 19/12, 2012 at 13:3
2
Solved
I have the following CSS animation:
.border-strobe {
-webkit-animation: border-strobe-animation 1.5s infinite ease-in-out;
}
@-webkit-keyframes border-strobe-animation {
0% {border:2px solid #F...
Lamarckian asked 4/5, 2012 at 3:19
5
Solved
I'm trying to get a CSS animation property to stay after completing, is this possible?
This is what I'm trying to achieve...
The element should be hidden when the user lands on the page, after 3 ...
Obala asked 19/3, 2012 at 17:23
10
Solved
I don't know how to use JQuery, so I need a method which could trigger an animation using JavaScript only.
I need to call/trigger CSS Animation when the user scrolls the page.
function start...
Puberulent asked 30/6, 2017 at 12:34
12
I've recently discovered how to "properly" use CSS animations (previously I dismissed them as not being able to make complex sequences like you could in JavaScript). So now I'm learning about them....
Resolved asked 14/12, 2012 at 23:53
2
I have an issue that involves a CSS transition effect jumping at the end when using Safari.
The animation occurs when hovering on an image. When on Chrome, Firefox, Opera etc the animation is smoo...
Pitiless asked 30/5, 2016 at 9:52
2
Looking for a workaround for a bug I have encountered in Safari (version 10.1.1), where an element that animates 'transform' with % translation does not update correctly when that element is resize...
Ungracious asked 22/9, 2017 at 21:44
1
What is the criteria?
In the following example, I am animating CSS transform, and when you click anywhere (while in Google Chrome) the animation is blocked by a 2-second-long while loop.
Why is the...
Sector asked 4/4, 2019 at 4:14
© 2022 - 2024 — McMap. All rights reserved.