All Questions
Tagged with keyframe or css-animations
8,569 questions
Advice
0
votes
4
replies
113
views
How can a CSS animation transform scale start from where a transition left off?
I have an HTML div that contains a photo, amongst other things. This div is movable by the user with a click and drag. When the div is clicked (:active), after a slight delay, I have it grow slightly ...
- 218
0
votes
1
answer
117
views
Animate a div between width constrained and a height constrained, also keeping the same aspect ratio as the img
I have a div containing an image. The image is user supplied so it can be tall or wide or square. By default I want to keep the image at a fixed 36px height, its width expanding as needed according to ...
- 1,346
0
votes
0
answers
78
views
Why is my SVG animation not playing after embedded in an HTML-Element in TYPO3?
I want an animated Icon (path stroke animation). I used https://svgartista.net/ to get the the following codes. My collegue, who is not available for me anymore, told me to add ... somewhere. But I ...
- 1
0
votes
2
answers
101
views
How can I make each word pause in the middle for a second before scrolling up to the next?
My code here scrolls up smoothly but I want each word to pause in the middle for a second before scrolling to the next word while keeping the infinite loop?
<div id="scroll-container">
...
4
votes
1
answer
150
views
How to emulate aspect ratio change using CSS animation?
I've tried researching using a couple of sources, but none of them focused on my problem specifically. I want to use CSS, if possible, to get a border effect that emulates some aspect ratio changes, ...
- 43
1
vote
0
answers
97
views
How to make an overlay animation in a StackPane with JavaFX
I have three StackPane elements, each containing its corresponding ImageView for an Icon and an overlay VBox. The intended animation is to make the overlay appear from the top to the bottom of the ...
- 799
1
vote
2
answers
100
views
Trying to get a typing like effect for my personal website in HTML and CSS
I'm writing a simple webpage to advertise stuff I've done, so basically my GitHub page but with more presentational value, also using it to get more practice with HTML, where as I'm more familiar with ...
2
votes
2
answers
118
views
ViewTransition for inverse circular reveal (animate old page instead of new one)
Situation
Consider the following ViewTransition between two HTML pages (Multi-page app, MPA).
The code for this is simple.
<!-- old.html -->
<html>
<head>
<link rel="...
- 1,167
2
votes
0
answers
166
views
CSS animation flickering
I'm, creating the marquee of banners for my Shopify store, here is the code:
<div class="site-header__banners-wrapper">
<div class="site-header__banners">
...
1
vote
1
answer
96
views
problems with animation-timeline
I have a problem with the animation-timeline, it doesn't give me the option to animate when I scroll, nor does it give me a valid property in CSS.
body {
margin: 0;
font-family: sans-serif;
...
0
votes
1
answer
63
views
How to add a second CSS property (color change) to a transform animation using classList.toggle? [closed]
I'm working on a simple project where I want to animate a div element. I'm trying to make a white box both move to the right and change color when it's clicked. I'm using a JavaScript click event to ...
- 11
0
votes
1
answer
45
views
Bottom border animation is not activating
<section className="accessories bg-blue-600 p-8">
<div className="container max-w-7xl my-0 mx-auto">
<div className="accesories-wrapper">
&...
1
vote
2
answers
273
views
How to make CSS infinite logo slider animation smooth without jumping?
I am creating a horizontal logo slider with multiple tracks.My goal is:
Even-numbered tracks should animate logos to the right.
Odd-numbered tracks should animate logos to the left.
Whenever I add new ...
1
vote
1
answer
91
views
Thin border artifacts around animated circular mask during clip-path transition
I have a custom button with a circular mask hover animation using clip-path and CSS custom properties (@property + --tx / --ty).
The effect works just fine, but I see thin visible borders/artifacts ...
- 1,157
0
votes
0
answers
84
views
Chrome Recalculate Style For All CSS Animations when mutating the DOM
I found chrome will recalculate style for all existing css animations whenever I mutate the DOM even if I have already add will-change: transform to make every animation in its own compositing layer.
&...
- 399