8,570 questions
Advice
0
votes
4
replies
98
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
0
answers
72
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
70
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
96
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
141
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
95
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 ...
- 801
1
vote
2
answers
98
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
114
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,157
2
votes
0
answers
160
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
93
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
54
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 ...
- 1
0
votes
1
answer
38
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
252
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
89
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
0
votes
1
answer
117
views
How to turn off the default animation or disable animations for elements in WordPress? [closed]
WordPress Theme: AIPT Modeltheme
I have been through files like animate.css but I can't find a default setting. Chat GPT advised me to look for data-animate= and then edit it, but I can't find that.
...
-1
votes
1
answer
83
views
Slider switch state modified by Javascript: animation is not triggered
When clicking on a slider switch (made with CSS + an input checkbox under the hood), the animation shows.
However, when setting the checked value from JS, the animation is not triggered.
How to solve ...
- 47.5k
0
votes
2
answers
106
views
Safari ignoring opacity change in CSS animation
This always worked but I recently checked a website on iOS Safari and noticed a CSS effect now didn't work, I guess after an update. Confirmed this also didn't work on Safari on my laptop. It does ...
- 1,667
0
votes
0
answers
83
views
HTML + CSS "lag" in image showing / loading on website
I'm making simple slider for my website (css animation translate 0 to -10000px).
Have HTML like this (those are divs 1-20 and another time 1-20 for loop that):
//Before that I was making it by JS (...
- 29
0
votes
0
answers
39
views
Css fade-out animation doesn't work in MDN example in FF or Safari [duplicate]
Any idea why the fade-out animation in the last MDN example on Using_CSS_animations doesn't work? The fade-in works, when I click on the white space the div with the red border fades in as expected, ...
- 4,057
0
votes
1
answer
90
views
Animate svg dashed line using GSAP and React
I'm working on animating dashed lines that extend from a central block to surrounding blocks. The goal is to make the dashed line appear as if it's gradually being filled with color, starting from the ...
- 1
0
votes
0
answers
38
views
LayoutTransition react issue
I am writing a web application in react-with-typescript:
I use index.tsx as a layout component, I need to somehow delay the transition between pages so that the animation of filling the screen can ...
3
votes
0
answers
95
views
Video frames shake/stutter when rendering HTML5 video to Canvas during CSS animation
Full JS from Github
Full css from Github
Full Html from Github
Video frames shake/stutter when rendering HTML5 video to Canvas during CSS animation
I'm experiencing video frame shaking/stuttering in a ...
- 31
1
vote
0
answers
62
views
Why is cubic bezier animation different in CSS vs JavaScript? [duplicate]
I discovered a curious issue when moving an animation with a cubic bezier from CSS into JavaScript: the timing was different. See example below:
(tested in both Chrome and Safari)
It’s not a loading ...
- 335
0
votes
0
answers
39
views
Cross-Fade between images with CSS in loop without "fading to black" at keyframes
I would like to cross-fade between several images using CSS only, and then loop through that animation indefinitely. I used the methodology provided by Zack White in this question, which does fade ...
- 123
1
vote
1
answer
90
views
Animating an "e-book" portfolio using CSS, why aren't the pages turning?
I'm building my portfolio with CSS and JS. I followed this tutorial on how to create a flipbook with CSS. But for some reason, I cannot get my pages to flip; only my cover does.
I am guessing that the ...
- 11
2
votes
4
answers
82
views
Need help in toggeling animation with CSS Web Animations API
I am trying to toggle an animation on an element using the CSS Web Animations API (WAAPI). Specifically, I want the animation to transition smoothly between two states on each button click — ...
-2
votes
2
answers
443
views
How to create smoothly expand/collapse panel using pure CSS?
I create expand/collapse panel that work fine. I use angular for click event handle and pure CSS for styling.
There is a LIVE DEMO.
However this panel doesn't open/close smoothly. Please help my to ...
- 1,040
1
vote
2
answers
85
views
How do I make my `<p>` match the width of its parent without affecting the parent
This is my minimal reproduction (only works in Chromium browsers due to calc-size):
.parent {
display: flex;
align-items: start;
}
.item {
display: flex;
flex-direction: column;
background: ...
- 880
1
vote
2
answers
86
views
Animation in JavaScript function only runs once even when called twice
I'm new to programming and am designing a game for a school assignment. I have made a small animation in CSS of a dice being shaken, then displaying the number of eyes of the throw. What I want is to ...
- 11
1
vote
1
answer
55
views
In Bootstrap's Carousel- How Can I Style the First Indicator Differently On Load?
I have styled the carousel indicators to have a progress animation. The transition starts when the list item becomes active, and after 5 seconds it ends, the color disappears, and the next indicator ...
- 317
0
votes
1
answer
88
views
How can I animate an element that shows up after a function is called?
I've been trying to make my navbar responsive for mobile and decided it'd be good to make it a lateral bar when the width gets smaller. Also, in order to not having to change the code in every single ...
- 3
1
vote
1
answer
65
views
CSS: Animate background-size on hover
I have the below CSS / SCSS code:
I've set the background properties in the figure and only changed the background-size property for the hover... but it just jumps to the new size instantly instead of ...
- 115
0
votes
1
answer
176
views
Make card hover animation with tailwind
I have the below code of React with tailwind styling which is pretty much working as per my design -
import React from 'react';
const SubscriptionCard = () => {
const commonHoverEffect = "...
- 15
0
votes
2
answers
58
views
Define both element dimensions based on one parent dimension
:root {
--success: #0c0;
}
button {
border: 2px solid;
border-radius: 10px;
cursor: pointer;
margin: 1em 0.5em;
padding: 10px 15px;
transition: transform 1s;
}
button:...
- 81
0
votes
1
answer
90
views
Why do my floating leaves appear at the same time and barely move?
I'm trying to create a floating leaf animation using CSS and a parallax effect with JavaScript. My goal is to have multiple leaves float in slightly different paths and timings across the screen.
But ...
1
vote
2
answers
49
views
Looped background animation without setting px position
I have been using a preprocessor to generate looped background animation like this:
@keyframes anim
{
from { background-position: 0 0; }
to { background-position: ...
- 367
0
votes
0
answers
25
views
View transition with circular mask glitches in Chrome
I want to implement a simple view transition animation where a circular mask slowly reveals the new page. The animation glitches when running it in Google Chrome (Version 134.0.6998.166 arm64). I don’...
- 91
0
votes
1
answer
43
views
CSS animation through JS slows down and then stops when using translate with rotate
const box = document.querySelector('.box');
let id = undefined;
function animateTest() {
const style = window.getComputedStyle(box);
const matrix = new DOMMatrixReadOnly(style.transform);
const ...
- 360
0
votes
0
answers
25
views
Stuck at implementing some Scroll-Driven Animations
I'm trying to implement the animations of the following video using scroll-driven animations (scroll-driven-animations.style). I have the text part, but I am stuck with the images (the ones with ...
1
vote
0
answers
82
views
SVG + CSS flame wave animation
I am using the example from https://codepen.io/BlackStar1991/pen/xxVOdJb
and I'm trying to turn that animation in a square and add some waves moving across it, much like in the gif below
here's what ...
- 508
0
votes
0
answers
51
views
KeyFrame detection in python
I'm building a RAG system for a platform where the primary content consists of videos and slides. My approach involves extracting keyframes from videos using OpenCV
diff = cv2.absdiff(prev_image, ...
- 13
1
vote
1
answer
73
views
Animate transform-origin while maintaining previous rotation position
I am trying to animate a "left" to "right"-side rotation using transform-origin. More specifically, I would like to maintain the left side's rotation position when the transform-...
- 822
0
votes
1
answer
64
views
How can I prevent SVG elements from overflowing?
I have an SVG map of Africa, and I want to embed a second SVG within it. However, I’m unable to do so due to an overflow issue. I suspect that I might be facing a clipping or masking problem. Since ...
- 1
-1
votes
1
answer
56
views
Animated SVG does not reach bottom of container
hello all and thanks for being here, lets see if you can clarify what is wrong here:
i am trying to add a simple animation of a snowflake falling from top to bottom within a container:
here link: ...
- 624
0
votes
1
answer
89
views
Angular - Infinite animation of moving lines
I am trying to render an infinite animation of lines going from page bottom to top.
Here is the result :
https://stackblitz.com/edit/angular-xyke249e?file=src%2FAnimationPage%2Fanimation.component.ts
...
- 964
1
vote
2
answers
93
views
How do I reuse keyframes to play an animation backwards?
I have the following css:
@keyframes expandTop {
from {
height: 0;
}
to {
height: 100px;
}
}
&.expand {
animation: expandTop 0.5s ease-out ...
- 4,699
5
votes
2
answers
181
views
How to create button with multiple pulse effects
I want a button which pulses multiple times (three or so), like in this Dribble video demo. The button pulses should have an interval between pulses of about 300-400ms, and also if the twisting effect ...
1
vote
0
answers
117
views
3D vertical flip animation on a div with a different backside?
I am basically trying to replicate an effect from a website (Awwwards link) where there seems to be a grid of divs that individually "flip" vertically on-hover and all together on-scroll.
...
- 19
2
votes
1
answer
165
views
How would I go about smoothly animating (in CSS only) the elements in a drop down list with a slide-down approach?
(I'm still pretty new to HTML and CSS so bare with me) I've been trying to customize this website to make it more pleasing to the eye. One of the things I'd like to do is customize the drop down menus ...
- 23