Questions tagged [css-animations]

1

votes
2

answer
24

Views

Pause animation between each rotation for five seconds

I am working on this demo. How can I add five seconds delay to this animation between each rotate? .card { background: #00f; width: 100px; height: 100px; animation: rotate 4s infinite; -webkit-animation: rotate 4s infinite; } @-webkit-keyframes rotate { 100% { transform: rotate(90deg); }...
Mona Coder
1

votes
3

answer
48

Views

Trying to pause a css animation by adding a paused class

So I've seen people recomending this method as the best way to pause a css animation. Simply by adding or removing a class where the animation play state is set to paused to or from an element. Here are my attempts: @keyframes run { from { background-position: 0px; } to { background-position: -...
krecik2000
1

votes
1

answer
90

Views

CSS opacity animation changes position? [closed]

Does the CSS animation property when used to change opacity also change the position of an element? If so, what is going on in the DOM that makes that happen, and how can it be offset? Context: I've added a Javascript EventListener to a set of images, which when clicked calls a function that initiat...
Dan-in-Austin
1

votes
0

answer
21

Views

How to grab each frame from CSS animation?

Many libraries are available to animate text using CSS. I need to grab each frame from the animation. Can anyone help me please?
user3929226
1

votes
0

answer
40

Views

Scss map for animation

Help pleath, how to mate loop on scss for that HTML code .pot_st0 { fill: #15630D; } .pot_st1 { fill: #012D3F; } .pot_st2 { fill: #013D51; } .pot_st3 { fill: #01445F; } .pot_st4 { fill: none; stroke: #011F2B; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; stroke-m...
BlackStar
1

votes
0

answer
327

Views

AOS Animation Not Firing Correctly After Browser Resize

AOS is working great when this page first loads. Each 'white square' animation fires at the same time and all 6 squares are visible. I am noticing, though, that when I resize the browser to a smaller size and then size it back up to be larger again, the AOS in combination with the media query I set...
natalie
1

votes
1

answer
81

Views

Combining @keyframes and transform scale

When I load the page the box will have infinite keyframes of animation jumpin. Now I want the box to increase its scale when I hover it, but I cant seem to work it out. When I add the 'hover' code it will only work once. I added 'infinite' but still it wont work. but when I removed the keyframe the...
Marku Cerna
1

votes
1

answer
670

Views

ReactJS CSS - how do I re-trigger a @keyframes CSS animation

I have a component that switches some content and the animation of the content depending on the side it is switching it from: import React, { Component } from 'react'; class Skills extends Component { constructor(props) { super(props); this.state = { shownSkill: 0, fallIn: true, slideUp: false }; }...
Miha Šušteršič
1

votes
1

answer
107

Views

css flicker Animation with hover

I want to have a css only animation that fades in and out until hovered when displayed full. I can do both things seperately but not together. The hover element never works. Tried several combinations but here's the 2 seperate parts working: @keyframes flickerAnimation { 0% { opacity:0.4; } 50%...
working9til9
1

votes
0

answer
64

Views

CSS Slideshow with wrong timing of last image

I have a little problem with css3 slideshow. I am trying to run this https://www.cssscript.com/pure-css-css3-slideshow-with-image-panning-and-zooming-effect/ with 10 pictures. And my problem is that all slides don't have same duration. Now my nine slides goes correct for 5 seconds each. But there is...
user3166987
1

votes
3

answer
57

Views

Unsure of how to implement this transition/animation

So I was able to create a 'flip-card' element; however, my issue is that I am trying to scale the entire element using transform: scale() so that about halfway through the rotation, I want the element to begin expanding to a bigger size/scale. Just not sure if I use animations, multiple animations,...
WonkasWilly
1

votes
0

answer
26

Views

MS Edge: CSS Filter causes CSS Animation to be shaky

Please see: https://codepen.io/se7en/pen/QmLWNK In MS Edge 16 adding a css drop shadow to an icon using something like filter: drop-shadow(0px 0px 2px red); causes the css animation to be shaky. This doesn't seem to happen in any other browser. CSS: .icon { width: 24px; animation-iteration-count:...
Se7en
1

votes
0

answer
322

Views

Removing animation from Angular Material Tooltip (Angular 4)

I am using Angular 4 and have implemented the Angular Material tooltip within my app as shown below (it all is working fine) However once I hover over the tooltip #nav div the tooltip animates and I cannot see any property in the official docs to disable this - what is the best way to disable this a...
Zabs
1

votes
3

answer
173

Views

H1 tag does not show up

I'm struggling to understand why my H1 does not show up. It is covered by a div. The weird part is that the H1's parent div is visible if I change background color to something else than transparent. Input tag inside the same div is always visible as well. Only H1 is problematic. Here is the link t...
Maciej Czarnota
1

votes
0

answer
44

Views

After changing element id's to element classes in div tag, keyframes no longer working

Hi Friends I have a problem, In order to show multiple rows returned from logged in user, I had to convert my div id tags to div classes (both in my html and corresponding CSS). As a result, my key-frames within my CSS have stopped working. My original html code: //while($res = mysql_fetch_array($r...
user9445468
1

votes
1

answer
154

Views

animation-play-state is 'running' but won't play

I'm currently building a landing page with some css animations (pretty basic fade-ins). I initially set animation-play-state: 'paused' in my css file, and later on access it with jQuery while scrolling the page, to trigger the animation. Works perfectly fine on Chrome on my Mac, but trying to run it...
Niv Shani
1

votes
0

answer
106

Views

Animate a rotating tooltip without rotating text itself (CSS)

I would like to create a tooltip which consists of a line that rotates around an icon when hovered, as the diagram below shows. Rotation part is not difficult, but I am having trouble getting the text to stay parallel to the page. Any help, if possible with an example, would be much appreciated. The...
ogot
1

votes
1

answer
35

Views

How to make a slider with dot and prev/next buttons just by using CSS

I have some problem in making a simple slider by pure CSS. I have already made a slider with dot buttons, now I want to make a prev/next buttons but the code doesn't work and I'm confused Here goes the HTML/CSS: https://codepen.io/Sethdash/pen/ZxLydr ‹ › expend your expedndiure with DR...
limboo
1

votes
0

answer
29

Views

Animating translateZ makes rotateY mirrored

I'm working on something that involves 3 deck of cards. And I want to be able to move cards from the far most deck to the middle deck and as a final step to the first deck. Moving and rotating works fine, BUT if I add a translateZ so make the 'side decks' look like they are behind the middle deck fo...
1

votes
0

answer
30

Views

Toggle div enable drag event angular2

1: Angular 2 toggle div http://plnkr.co/edit/xLvfJMdB8zQFlUFFeSvp?p=preview This is the html code used for view {{clickData}} css code associated with component .myContainer{ width:100px; } .tog-button{ height: 37px; // -webkit-box-shadow: inset 0 1px 3px 0 rgba(85, 85, 85, 0.5), 0 2px 4px 0 rgba(...
startercoder
1

votes
1

answer
41

Views

Stop repeating the same code in css

I'm fairly new to learning CSS and have been playing with some animation and things. In my CSS, I have the same thing repeating again and again, but with a difference of 0.1. It's animation-delay: 0.1s, this increases in increments of 0.1s. Do I have to type the code like I have in my example. Or...
William Lake
1

votes
1

answer
1.1k

Views

CSS animation of plane flying onto page and landing

I'm looking for a way to animate a plane flying from off-page onto the page. At the moment, I'm using the code below, which is very clunky and not smooth. Do you know a better way to do this using CSS and HTML? If not, using another method? .plane-animation{ animation: animationFrames linear 3s;...
user8693051
1

votes
2

answer
105

Views

CSS keyframe animation: translate3d is not visible in IE10 and IE11

I have animation running continuously which moves a element(arrow) from right to left then rotate 180deg and move from left to right. For some reasons, animation is not visible in IE10 but arrow appears in left and right position. Overall, animation happens but translate3d animation (move from left...
forethought
1

votes
1

answer
30

Views

CSS Transition from Animated State

Is it possible to force an element with an animation property affecting opacity to transition from its current state to another predetermined state on hover? The null state object is animating between differing opacities: #thumb { opacity: .33; -webkit-animation: pulse 2.7s infinite ease-in-out; -o...
1

votes
0

answer
69

Views

CSS folding edge transition flickering and not working on Microsoft Edge

I have a card with a folding edge css animation on the bottom right corner. The animation shows flickering borders in the white triangle and on Microsoft Edge it even animates in the wrong direction. How can I get rid of the flickering and the wrong rotation on Edge? Is there an easier way to achive...
Gehtnet
1

votes
1

answer
420

Views

Add and remove css class only during scroll in React?

I am working on a mockup blog for my portfoilio which has a grid of posts which are 400x400 cards with a hover effect that increases scale and adds a drop shadow (this is rendered in the dashboard route). I have noticed however that when scrolling my page, the pointer will get hung up on the cards a...
koalamo
1

votes
0

answer
25

Views

css animation in chrome not working

I can't figure out the reason of the different behavior of my slider in firefox (works fine) and chrome (act weirdly) I've made a jsfiddle with all the rules in case it was the problem, but it fix nothing... https://jsfiddle.net/86mmns1z/13/ as you can see, it's a slider controlled by two sets of bu...
hugogogo
1

votes
1

answer
840

Views

Angular 4 slide in animation

So i am trying to make a carousel like animation in angular 4 for navigating through form pages but when I trigger the slide animation, instead of sliding next to each other they get stacked on top i've tried floating div2, making div2 inline, They both slide concurrently which is desired but just...
G Bravo
1

votes
1

answer
99

Views

Angular5 enter/leave animation has no effect

I followed the tutorial found at https://angular.io/guide/animations but can't replicate the effect. My template (html) contains: ... and my message class has a height attribute: div.message { height: 26px; } I would like the messagesto slide in and out (Y-axis) when they are added/removed from the...
user1884155
1

votes
0

answer
20

Views

Manipulate/Animate a Canvas Element like this?

When you take a look at this keyframe animation, you can see a moving image and some more adjustments. The moving image is a duplicate of one of the images which is also on the canvas. Do you know a method to create the same animation, but for the image on the canvas? Is it even possible to have a...
taraz
1

votes
0

answer
39

Views

On hover change animation with transition

I need to change the animation with a transition effect. That is change first transition to another with a flow. When I tried for the same the animation changes with a fast change as in below snippet. Is there any way to animate the change in animation. I have tried the below code. body{ background...
AdhershMNair
1

votes
3

answer
316

Views

How to make the animation play when the radio button is checked?

I tried to make a custom radio button which changes color and plays and animation when click upon. But I was just able to do that with hover, I tried to use the 'input:checked' but it pretty much didn't work When I hover on the radio button an animation takes place, but I want the animation to take...
mvrikxix
1

votes
0

answer
23

Views

Why tablesorter row CSS animation resets whenever it resorts

I use tablesorter 2 to create a sortable table. As I have some live data will come in from backend server, I want to highlight the changes, so I created a CSS animation like this @keyframes highlightfade { from { background: #0081FF; } to { background: transparent; } } .highlight { animation: highli...
Fang-Pen Lin
1

votes
0

answer
366

Views

CSS3 indeterminate progress bar that don't freezes

What I'm trying to achieve is an indeterminate progress bar that do not freeze when executing background tasks. I already tried the following ways and all of them causes the progress bar to stop its animation whenever I do another heavy task: .gif .svg the native AngularJs Material indeterminate pro...
diosney
1

votes
1

answer
564

Views

styled-components animation back and forth based on props

I want to have my main content slide in and back on specific prop so I created the animation, and I thought I'll add reverse to it in the case the prop changes. Now the below code works, but the only problem is on the first page load I can see the 'slideOutContent' animation I don't want it to happe...
Tzook Bar Noy
1

votes
1

answer
191

Views

CSS keyframe animation in iOS Safari/Chrome/Firefox flickers/out of sync

I have a React app with CSS keyframe animations to change the appearance of text, and am changing the font dynamically through JS using setState and setInterval. I sync the keyframe animation to begin playing at the same time as a call to setInterval, and everything works fine on Chrome/Safari for...
sheric
1

votes
0

answer
237

Views

Animate element position swap in Angular

I want to animate s.th. with Angulars Animation Module or CSS I have a dynamic list of cards in my component. These cards should be swapped depending on how the array contains them. A button can change the array content (changes the ordering of the elements). Angular Animations mostly use ease-in/e...
MadScientisto
1

votes
2

answer
81

Views

Animating on scroll

I've been trying to implement this myself as I wanted to understand how this works. What I'm trying to do is very well displayed on https://michalsnik.github.io/aos/. Simply put, the animations only trigger when scrolling down. Which is what I want to achieve. So far, the idea I had was $(window).on...
Aaron
1

votes
0

answer
47

Views

CSS transform set via JS conflicting with CSS animation

I'm rather used to using animations etc. but this one has got me stumped. I have a CSS animation like so on a inline-block div element. 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);...
The Sloth
1

votes
0

answer
54

Views

OS-Animation not working?

I am very confused right now. I've used Os-animation before and I even copied the exact code from my other use of it, but I cannot get it to work on this page. Here is my HTML/CSS: html, body { margin: 0; padding: 0; height: 100%; width: 100%; background-color: #4074A0; font-family: 'Open San...
JShepherd

View additional questions