All Questions
Tagged with keyframe or css-animations
8,570 questions
- Bountied 0
- Unanswered
- Frequent
- Score
- Trending
- Week
- Month
- Unanswered (my tags)
1
vote
1
answer
65
views
Element jumps around the corner when animated with CSS offset path
I want to animate a rectangle so that it follows an svg path. I succeeded in doing so, however it looks like the rectangle is jumping around the corners of the path. In the Mozilla docs the animation ...
-1
votes
0
answers
114
views
How do I make my fade in animation only play when you first open the site and for certain links?
I'm currently in the process of making a small short stories blog prototype. I want to emphasise the mood of the site with a slow fade in transition animation, which then gives the user a short ...
0
votes
1
answer
73
views
How can I make the animation revert back smoothly in CSS
I have a simple CSS text that changes its position and font weight when I hover over it:
@keyframes boldenize{
0%{font-weight: 300; transform: translateX(0px)};
100%{font-weight: 900; ...
1
vote
0
answers
19
views
Can I export animation data from Chrome DevTools Animations panel (timing, easing, keyframes)?
I recently discovered the Animations panel in Chrome DevTools while debugging CSS animations.
What I would like to do is export the animation data (such as timing, easing functions, delays, keyframes, ...
Advice
0
votes
4
replies
122
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 ...
0
votes
1
answer
129
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 ...
0
votes
0
answers
82
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 ...
0
votes
2
answers
103
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
166
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, ...
1
vote
0
answers
104
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 ...
1
vote
2
answers
110
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
133
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="...
2
votes
0
answers
168
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
101
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
64
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 ...