Questions tagged [css-animations]

CSS animations make it possible to animate transitions from one CSS style configuration to another. CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.

Filter by
Sorted by
Tagged with
0 votes
1 answer
33 views

Animating div upwards inside another div [closed]

I just started learning html, css and javascript to do web development. I'm running into a problem that I can't move a div upwards whenever the mouse is hovered over the div that it's located in. ....
Mstr's user avatar
  • 3
0 votes
0 answers
26 views

Animate SVG path to look like a flowing pipe

I'd like to use SVG and CSS to create a "flowing pipe" animation. I want to recreate the effect seen here: https://twitter.com/JohnPhamous/status/1732463692443512981 I got the basic SVG ...
learyjk's user avatar
  • 609
1 vote
1 answer
26 views

How to activate animation when mouse left the div/space?

So I was making the site that has menu that "slides" down from the top. This is css code for aniamtion; @keyframes slide-vertical-44-px-down { 0%{height: 0px;} 100%{height: 44px;} } ...
niceGuy's user avatar
  • 35
0 votes
1 answer
25 views

Hero slider with wide image and animations on it to work with mobile

I'm working on side project and the client want from me to create hero for full screen and should be scrollable horizontally, you can click on the image and swipe from left to right and from right to ...
konradns's user avatar
2 votes
2 answers
53 views

small ball rotation animation inside the bigger ball

I want to rotate the ball inside the circle so it touches every corner of the bigger circle and animation continuous infinitely as it is a logo animation. body { background-color: #272727; ...
Khan Shahan's user avatar
0 votes
0 answers
9 views

How to create copy of telegram modal scrolling

Telegram uses modals for some menus: The point I stack in is if content of modal menu goes beyond the screen modal became scrollable but in not usual way. Not content scrolling but rather part of ...
Denys Garbuz's user avatar
-1 votes
0 answers
26 views

Unblurring a blurred image when a specific object is under it [closed]

I wonder, does anyone know any way (or workaround) to reveal a blurred image when a specific object (not zone) is encountered in a website ? I know that I could just throw in a png of the unblurred ...
Bulpah's user avatar
  • 1
0 votes
1 answer
43 views

Crossfade two images with CSS and stop at the end

I want to crossfade from one image to another and stop at the end. Currently my code looks like below. Unfortunately the target image f2 doesn't stay and reverts to a white background. .fadein { ...
lmoly's user avatar
  • 103
1 vote
3 answers
55 views

Animating a CSS car with charge filling from bottom to top

I have designed front fascia of a car in CSS, and I would like to animate it from bottom to top, with charge filling in. How can I achieve that? I am able to fill the bottom section of the car with it,...
Frosted Cupcake's user avatar
0 votes
0 answers
19 views

Angular animation doesn't play on ngAfterContentInit without setTimeout

I am trying angular animations for the first time, and I was wondering, why I need to wrap my toggle within a setTimeout when the component loads in order for the animation to play? If I don't wrap ...
Get Off My Lawn's user avatar
2 votes
0 answers
35 views

CSS keyframed gradient animation fails on NextJS production build

EDIT: I found that the issue is that during build, the generated css file has the %, from initial-value removed, so it results in just initial-value:0 which is not correct since i'm using perchantage. ...
Gr33nLight's user avatar
-1 votes
0 answers
11 views

What libraries or technologies do these fancy website animations use?

So I was looking at 3 examples where I don't know how they did the animation: https://www.halo-lab.com/ - a lot of cool animations as you hover the elements https://unseen.co/ https://www.kippo.com/ -...
zymeth02's user avatar
-1 votes
0 answers
12 views

How to give animating behaviour to our webpage with help of HTML and CSS? [closed]

I want to know what are the tags and selectors and animation tags we should use to add animations to webpage... I have tried using "hover" keyword but I want an output like background of ...
Ayush's user avatar
  • 1
1 vote
1 answer
45 views

React double-sided card flip

I created a small React app that displays Pokemon cards. There's a Card component made up of two divs that represent a front and backside for each card using a card-front and card-back className. ...
JackJack's user avatar
  • 193
0 votes
0 answers
42 views

Animate svg lines

I have an SVG file with lines in it. Now I would like the line on the left to animate from right to left (one time), and the line on the right to animate from left to right (one time). I have made an ...
Alex's user avatar
  • 11
0 votes
2 answers
73 views

How to reverse CSS image animation?

I am trying to build an animation that uncovers an image from right to left. However it doesn’t seem to be working the way I expected, it is currently going from left to right even after I changed &...
Christopher Woodby's user avatar
0 votes
1 answer
34 views

Animate inline-blocks to move over when new one comes in from left

So I have a horizontal bar of items, and I want one to be hidden, and when hovering over the parent object, it slides into the left. I am trying different ways, such as using negative margins to hide ...
PixelPaul's user avatar
  • 1,062
0 votes
2 answers
57 views

CSS Animation Transform a div into another

I'm trying to code an animation that transforms one div into another. For example, if I want to transform div1 into div2, I'd like div1 to get the size, position, rotation and background color of div2....
BiMathAx STUDIO's user avatar
1 vote
2 answers
48 views

How to change the opacity or visibility of an element using Javascript

I have 3 svgs I use in my button element an unchecked svg, checked and loading. By default the unchecked is set to 1 while the rest are 0. I'd like to change the opacity of the unchecked to zero the ...
Abdulmujeeb Ahmad's user avatar
0 votes
0 answers
21 views

How to create an infinite horizontal scroll animation using Qwik framework?

I am trying to create a web page that has an infinite horizontal scroll animation using Qwik framework. I have added the CSS part, but I don’t know how to add the JavaScript part. here is my code: ...
Pushon's user avatar
  • 15
0 votes
1 answer
29 views

My angular image wont swap with angular animations

im trying to swap images using angular animations based off a 10 sec timer, but the swap never happens, ive been tinkering with it but i dont know whats wrong, the images are supposed to change when ...
kharon's user avatar
  • 3
0 votes
0 answers
19 views

Need help in React and Framer motion animation

I'm trying to do an animation like this. There when you scroll you can see an image carousel where outer element is static and images are changing. I'm using Framer motion to achieve this. This is the ...
Santhosh's user avatar
0 votes
1 answer
38 views

want to shine Effect on Button in ReactJS

Here, I want a shine effect on the button. I have done the basic one, but some modern shine effect is needed. I want to get into that button after hovering, so how do I make that more realistic and ...
Sougata Mukherjee's user avatar
0 votes
0 answers
42 views

Trying to modify a Codepen example of a rotating gradient

I've found a great Codepen by Kevin Powell showing how to animate a gradient behind a rectangular card. I'd like to adapt this to allow for the card to be a polygon - specifically an upward pointing ...
Daniel Pressburg's user avatar
1 vote
0 answers
34 views

Having Issues Changing CSS Animation Speed with jQuery

I'm trying to dynamically change the speed of a CSS animation in an SVG element using jQuery, but I'm running into an issue where the SVG jumps on value changes. I couldn't solve the problem, can you ...
Tarık Öztürk's user avatar
2 votes
1 answer
41 views

Cannot read properties of undefined (reading 'style') TypeError: Cannot read properties of undefined (reading 'style') Getting this error for the code

I tried this block of code and got the Cannot read properties of undefined (reading 'style') TypeError: Cannot read properties of undefined (reading 'style'). Can someone help? . let slideIndex = 0; ...
Harsh Bhat's user avatar
0 votes
1 answer
49 views

Animating a modal <dialog> element: Whole body moves instead

The idea is to have a <dialog> element open as modal dialog, and on opening to slide in from the right. The following minimal example was what I came up with: <button type="button" ...
Boldewyn's user avatar
  • 81.6k
1 vote
0 answers
38 views

How to smooth Framer Motion animation triggered by Mouse Move?

I'm working on a project that needs to resize a box on mouse dragging, but I'm having some issues while trying to add animations using Framer Motion. I've tried 2 different approaches so far. Using ...
Unknown X's user avatar
0 votes
1 answer
25 views

How to *named* @keyframes in SASS?

I'm trying to create the following set of named @keyframes using a loop in SASS @keyframes loading-1 { 14.28% { opacity: 0.3; } } @keyframes loading-2 { 28.57% { opacity: ...
Carl S's user avatar
  • 69
2 votes
4 answers
52 views

make a div rotate, but keep its content fixed

I'm trying do an arrow to point to a direction, chosen by a gamepad. I styled my arrow like this : A screen of my arrow, as an image is better than 1000 words When an angle is given by the joystick, ...
Tsu'Na's user avatar
  • 29
1 vote
0 answers
39 views

Why @keyframes animation does not work in Safari inside a link

There is a link inside a block, and the link has an svg that is animated with @keyframes. I don't know why, but in Safari the animation with @keyframes doesn't work. In Chrome and other browsers it ...
Petr Savenok's user avatar
2 votes
1 answer
31 views

How to stop animation when click and return it to the 1st frame?

I have a css like this: #turbo_fire { transform-box: fill-box; position: absolute; animation-name: burning; animation-duration: .005s; animation-direction: alternate; animation-iteration-...
Vladikslavus's user avatar
0 votes
0 answers
13 views

How to remotely measure the visual rendering performance of an HTML5 game?

I have a simple HTML5 game that uses JavaScript and CSS animations. Even though it's visually simple, performance has been a challenge because there are ads on the page that sometimes impact it ...
kettlepot's user avatar
  • 10.7k
0 votes
1 answer
30 views

CSS animation fill text right to left

Currently, I've got the animation working. Except it got the background retained. So for example, if I implement this component on some other component that has a background image or opacity this ...
Shinjo's user avatar
  • 687
0 votes
2 answers
66 views

Horizontal scroll using CSS animation - translate with sticky position not working as expected

I have created a fiddle with infinite horizontal scroll using CSS animation and I want the first element in the list to be sticky. It works as expected when using the left property in the @keyframes ...
Teja's user avatar
  • 133
0 votes
0 answers
20 views

Flakiness in CSS Animations fired from VideoJs player events

I am trying to get a div with a "nameplate" to slide over the top of my videos in a videojs playlist. This seems to work in my codesandbox example while running it on codesandbox. However, ...
David Krause's user avatar
0 votes
0 answers
20 views

Animation by CSS order is not working in Angular animation

I'm trying to animate with angular query with the following code and when I hit "Hit me" button on the webpage, the page stays the same without any animation. EXPECT: When clicking "Hit ...
jaeyong's user avatar
  • 8,959
0 votes
0 answers
43 views

How can I synchronize text scrolling with video seeking using GSAP and ScrollMagic?

How can I implement a GSAP-based animation effect in which a video scene seeks forward as I scroll, and I also need to scroll text into view (like any other element, enters from the bottom of the ...
Vedant Shah's user avatar
0 votes
0 answers
37 views

Stroke-dashoffset and stroke-array properties are not working in firefox, but work in jsfiddle and codepen

I tried using SVG and properties stroke-dashoffset and stroke-array but they are not applied for some reason. I am new in working with SVG's and vector spaces so I don't know much but I need a fix to ...
Andrej Nebohodac's user avatar
0 votes
1 answer
51 views

css infinite animation help needed

I have few DIV / card elements. (lets say 100px X 100px). first box with double size What I am looking is first box scaling down to 100X100 and next box scaling up to 200X200 and so on in infinite ...
bengaltiger's user avatar
0 votes
1 answer
30 views

zoom animation adjustment to adjacent items

I am doing a zoom animation in a infinite loop. Each item is zoomed / scaled around 2.5x. When zooming its overlapping with other adjacent items How I can make it so current zooming item get enough ...
bengaltiger's user avatar
1 vote
2 answers
42 views

css serial animation with keyframe

I want to animate 5 card / image block one by one then start again from beginning. Now for some reason its re-starting backwards again. I have added 5 blocks and total duration of animation is 8 sec, ...
bengaltiger's user avatar
0 votes
1 answer
40 views

How to design animated moving object when scrolling in WordPress website?

I'm new to WordPress and want to design a landing website with WordPress. How do achieve the scrolling effect when a user scrolling the website and wants to move an animated object through the website?...
Sidath's user avatar
  • 397
0 votes
0 answers
32 views

Mantain coordinate of a point in a fullscreen image

I've a fullscreen container (100wv 100wh) Objective: I want to show a specific portion of an image as a background (chessboard) to that container. There is another image(pawn) that I want to position ...
Vincenzo S.'s user avatar
0 votes
1 answer
40 views

CSS animation on hamburger toggle menu not working properly [duplicate]

I'm trying to animate the dropdown menu that appears when user clicks on the hamburger toggle. I want the menu to "fadein" instead of just popping up. The menu CSS: .nav-menu { display: ...
Aamer Khawaja's user avatar
4 votes
1 answer
63 views

How to repeat a timeline scope with CSS Scroll-driven animations

I've been playing with CSS scroll-driven animations (currently only in Chromium browsers) but one thing I'm really struggling to wrap my head around is how to use timeline-scope to crawl up the DOM ...
SparrwHawk's user avatar
  • 13.8k
0 votes
1 answer
52 views

How to animate resetting of transform: rotate with CSS keyframes?

I created an animation for leafs to "wave". The leafs have some initial value for rotate from tailwind: @keyframes growSize { 0% { transform: rotate(0deg); max-height: 0; } ...
Daniell's user avatar
  • 21
0 votes
2 answers
110 views

How to create an animation sequence with Tailwind?

I have the following element: <div dir="rtl" class="aspect-ratio-1 group relative h-min w-full max-w-[300px] flex-shrink-0 lg:max-w-[390px]"> <img class="rounded-s-...
Daniell's user avatar
  • 21
0 votes
0 answers
37 views

How to add a background image to animated SVG

I have an animated SVG shape. I need to add a background image masked by that SVG. Until the animation ends, the background image should be blurred. And once the animation is finished the background ...
Eshan Rajapakshe's user avatar
1 vote
2 answers
76 views

How to Create Hand-Drawn SVG Animation with a Mask

I'm trying to create the below SVG animation with a mask. I have tried with CSS stroke properties, but I cannot get it the way I want. Here is the W-shaped SVG I have created. path { stroke: ...
Eshan Rajapakshe's user avatar

1
2 3 4 5
151