css-animations

Adding class via js won't trigger css animation

由 拥有回忆 提交于 2021-02-06 10:57:13
问题 I have a modified version of animate.css (added some delay, new timings and new positions), and it works really great when the classes are set by default (html document). But when I am adding the animate class dynamically via js, the animation is not executed! Even more annoying, I did have it working at some point, but I can't get it to work again (using gumby framework and inview js to add a class when the element is on screen (adding .animated)) . The left box had the classes already in

Adding class via js won't trigger css animation

由 与世无争的帅哥 提交于 2021-02-06 10:56:24
问题 I have a modified version of animate.css (added some delay, new timings and new positions), and it works really great when the classes are set by default (html document). But when I am adding the animate class dynamically via js, the animation is not executed! Even more annoying, I did have it working at some point, but I can't get it to work again (using gumby framework and inview js to add a class when the element is on screen (adding .animated)) . The left box had the classes already in

Navigation bar disappears with CSS animations

由 て烟熏妆下的殇ゞ 提交于 2021-02-05 12:21:04
问题 I am using the CSS3 animations from the Animate.css library. They are real nice and they work perfectly when I combine them with WOW.js However, when I am scrolling down the page and the animations go into the screen, my fixed navigation bar on top of the screen disappears for a couple seconds, the time the animation is displaying, and then it goes back into the screen. How can I avoid this to happen? I don´t want my fixed navigation bar to disappear, ever. 回答1: I fixed it! After many tries I

How come css animations change z-index? [duplicate]

由 吃可爱长大的小学妹 提交于 2021-02-05 11:28:06
问题 This question already has answers here : z-index is canceled by setting transform(rotate) (6 answers) Which CSS properties create a stacking context? (1 answer) Closed 2 years ago . Why is it that the animation changes the z-index? If you look at the jsfiddle, you'll see the red image is on top but if you comment out the animation, the blue image is on top. How can I get the blue image to always be on top even with the animation? jsfiddle HTML <img class="blue" src="http://via.placeholder.com

pause/resume svg animation on android webview

由 浪子不回头ぞ 提交于 2021-02-05 11:25:07
问题 I want to pause/resume SVG animation on Android WebView using JavaScript. tried on jsfiddle but not working either http://jsfiddle.net/ysbo5zdw/1/ /assets/svg/trial.html <!DOCTYPE html> <html> <head> <title>dynamic Image</title> </head> <body> <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="cloudDrizzleSunFillAlt" class="climacon climacon_cloudDrizzleSunFillAlt" x="0px" y="0px" viewBox="15 15 70 70" enable-background="new 15 15 70 70" xmlns="http://www.w3.org/2000/svg"> <style

How to replay a CSS3 animation in Reactjs

由 半世苍凉 提交于 2021-02-04 17:57:08
问题 I have set my animation in my css file: @-webkit-keyframes jello-horizontal{ 0%{ -webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1) } 30%{ -webkit-transform:scale3d(1.25,.75,1); transform:scale3d(1.25,.75,1) } 40%{ -webkit-transform:scale3d(.75,1.25,1); transform:scale3d(.75,1.25,1) } 50%{ -webkit-transform:scale3d(1.15,.85,1); transform:scale3d(1.15,.85,1) } 65%{ -webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1) } 75%{ -webkit-transform:scale3d(1.05,.95,1);

How to replay a CSS3 animation in Reactjs

由 偶尔善良 提交于 2021-02-04 17:57:05
问题 I have set my animation in my css file: @-webkit-keyframes jello-horizontal{ 0%{ -webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1) } 30%{ -webkit-transform:scale3d(1.25,.75,1); transform:scale3d(1.25,.75,1) } 40%{ -webkit-transform:scale3d(.75,1.25,1); transform:scale3d(.75,1.25,1) } 50%{ -webkit-transform:scale3d(1.15,.85,1); transform:scale3d(1.15,.85,1) } 65%{ -webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1) } 75%{ -webkit-transform:scale3d(1.05,.95,1);

Why are CSS keyframe animations broken in Vue components with scoped styling?

由 混江龙づ霸主 提交于 2021-02-04 15:23:27
问题 I'm trying to implement a CSS typing indicator in Vue. Without Vue, it looks like this: .typing-indicator { background-color: #E6E7ED; width: auto; border-radius: 50px; padding: 20px; display: table; margin: 0 auto; position: relative; -webkit-animation: 2s bulge infinite ease-out; animation: 2s bulge infinite ease-out; } .typing-indicator:before, .typing-indicator:after { content: ''; position: absolute; bottom: -2px; left: -2px; height: 20px; width: 20px; border-radius: 50%; background

How to animate a dashed arrow?

由 只谈情不闲聊 提交于 2021-02-04 15:18:10
问题 As the title describes, I am trying to animate a dashed arrow. I want it to look as close as possible to this on this site. I was able to make an arrow although I'm not sure that this was the correct way of making such arrow. I'm assuming I'd have to have drawn it with SVG... Also the animation looks weird and I don't know how to make it smoother... I'd appreciate some help guys :) This is the JsFiddle i made Here is the code: body { margin: 0; font-size: 16px; line-height: 1.528571429;

Add var into css class

由 允我心安 提交于 2021-01-29 08:34:24
问题 I'm currently writing a component that is making an animation in a loop, the animation time is a props passed to the component. My problem is the following: The animation is made in CSS: animate:{ -webkit-transition: 10.0s !important; -moz-transition: 10.0s !important; -o-transition: 10.0s !important; transition: 10.0s !important; } I would want to pass the duration inside this class declaration but it seems impossible and I'm using these CSS tricks to restart the animation: https://css
订阅 css-animations