css-animations Questions
6
Solved
I am trying to do a simple animation using React, keyframes, CSS modules (and SASS). The problem is that CSS Modules hash keyframe names the same way it hashes the local classes.
JS code
//...
...
Physicist asked 24/8, 2019 at 0:59
2
I would like to apply a shimmer animation to a collection of HTML elements but have it be in unison as if it is one shimmer running through all the elements. I have seen this done with animations w...
Alexi asked 16/8 at 17:47
5
I have a weird conflict in my main.js file. I run a fade up animation on ".main-headline--left"
$('.main-headline--left').addClass('wow animated fadeInUp');
This works fine, but when I add a pi...
Riddick asked 8/8, 2015 at 4:37
4
Solved
I'm trying to animate a sprite image, and found this great example:
Blog: http://simurai.com/blog/2012/12/03/step-animation/ (has succumbed to linkrot).
Wayback Machine: http://web.archive.org/we...
Righteous asked 22/3, 2014 at 0:47
4
Solved
I am trying to add a bounce effect to the end of the animation without using any 3rd party code or javascript. I managed to create the animation but could not achieve the bounce effect.
This is wha...
Miter asked 22/4, 2015 at 1:37
2
Solved
I'm trying to use CSS animations to create the effect of a light source pointing down on an object, casting a shadow and moving in a circular motion around it. I've created a snippet below to show ...
Dowel asked 20/8, 2020 at 9:55
7
Solved
How can I have two CSS animations playing at different speeds?
The image should be rotating and growing at the same time.
The rotation will cycle every 2 seconds.
The growth will cycle every 4 ...
Wilmington asked 18/11, 2014 at 3:32
3
Solved
I can scroll to 200px using the following
btn.addEventListener("click", function(){
window.scrollTo(0,200);
})
But I want a smooth scroll effect. How do I do this?
Corso asked 15/2, 2017 at 22:44
2
Solved
How do I add the green shadow effect that connected to the moving vertical line.
See the image for an example of what I am aiming for.
How can I implement this in CSS?
Here is the example that I h...
Elenore asked 10/3, 2021 at 10:0
8
When I remove an item from a flexbox, the remaining items "snap" into their new positions immediately rather than animating.
Conceptually, since the items are changing their positions, I would exp...
Saransarangi asked 19/6, 2012 at 18:14
3
Is it possible for animation-duration to be set in relation to the element's width using calc, when the element is dynamically added and so its width not known before page load?
I have several 'ne...
Chancelor asked 15/5, 2019 at 22:45
7
Solved
I have a bar chart that animates with CSS3 and the animation currently activates as the page loads.
The problem I have is that the given bar chart is placed off screen due to lots of content before...
Braunite asked 1/5, 2013 at 20:11
40
Seems like there has been a recent update to Google Chrome that causes blurry text after doing a transform: scale(). Specifically I'm doing this:
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
...
Kanpur asked 3/2, 2013 at 21:26
2
Solved
I have a loading image which comes up during an Ajax load event. The image shows/hides by adding or removing a "loading" class to the body element. Currently, the loading image animates b...
Vituline asked 20/1, 2012 at 16:16
14
Solved
Is it possible to use CSS3 transition animation on page load without using Javascript?
This is kind of what I want, but on page load:
image-slider.html
What I found so far
CSS3 transition-delay, a...
Malloy asked 24/7, 2011 at 7:22
2
I'm using CSS3 Animations, and I want to be able to move to a specific spot in the animation. For instance, if the CSS looks like this (and pretend that I used all the proper prefixes):
@keyframes...
Aberrant asked 10/5, 2012 at 19:15
7
How can I fade in an HTML5 dialog? And by dialog I mean HTML5 <dialog> tag (http://demo.agektmr.com/dialog/).
I tried the following (http://jsfiddle.net/v6tbW/) but for some reason the trans...
Strenuous asked 28/7, 2014 at 8:20
3
Solved
I wonder if it's possible to restrict keyframe animations to a scope based on classnames. The benefit would be to be able to use the same animation-name multiple times without getting issues. I cou...
Laissezfaire asked 5/4, 2018 at 9:16
1
Solved
I try to implement a resortable list of collapsible div elements in vanilla JS. The general sorting is static but any of the elements is moved to the top. The top item is to be exchangeable. Transi...
Biochemistry asked 12/10, 2023 at 13:5
3
Solved
On the Mac OS X 10.8 "password" screen, if you enter an invalid password, it will "shake" back and forth (a.k.a. left and right). I am trying to achieve an similar effect for an HTML password input...
Lasky asked 31/3, 2013 at 3:21
6
Solved
Hello I am trying to do the simple task of moving a div up and down to give a floating/hovering effect using bottom instead of top. So from bottom: 63px to bottom: 400px.
I am new to CSS and keyfr...
Richel asked 14/3, 2016 at 14:36
1
I want to make an svg picture file containing some “card flip”-style animations, using css with a stylesheet embedded in the svg file. In Chrome, at least two problems may come up, depending on the...
Zoster asked 31/1, 2016 at 10:53
10
Solved
I've had a look around but can't quite find what i'm looking for.
I currently have a css animation on my page which is triggered by :hover. I would like this to change to 'click' or 'touch' when t...
Absence asked 21/3, 2014 at 13:10
4
Solved
I'd like to emulate an elastic easing function in CSS3. CSS3 does not support this natively, so I've been coming up with my own keyframes, and it looks okay, but not perfectly natural.
I do NOT wa...
Blatherskite asked 4/5, 2014 at 22:57
2
I have a situation similar to this fiddle, where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is o...
Demavend asked 14/12, 2017 at 19:32
1 Next >
© 2022 - 2024 — McMap. All rights reserved.