css-animations

how to make a blinking image in CSS3

由 爱⌒轻易说出口 提交于 2020-01-13 02:18:40
问题 I am new to CSS3 and working on a CSS3 code for blinking images. I just need to show an image with it blinking continually. I can't use a GIF image since the images come dynamically. 回答1: it's very simple... just use a CSS3 animation on opacity of the image I hope this helps.. here is a working fiddle http://jsfiddle.net/rameezrami/27754r4f/1/ or use following html <html> <head> <style> /* Firefox old*/ @-moz-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @

CSS Keyframe animation: Hiding element before animation starts

由 不打扰是莪最后的温柔 提交于 2020-01-12 05:30:08
问题 Is there a CSS way to hide an element and fading it in with a keyframe-animation after x seconds? Or do I need JavaScript/jQuery for that? How to do it? At the moment, it is also show before the animation starts and if I set opacity: 0; , the animation jumps back to that value after the animation is complete. Fiddle 回答1: You are close. An easy way is to just add animation-fill-mode: forwards; which will persist the last keyframe and in this case keep the div visible. Here's an updated version

SVG Rotation Animation Failing in IE and FF

由 寵の児 提交于 2020-01-11 11:21:33
问题 I'm working on making a simple loading spinner element with SVG. It works excellently in Chrome, but not in other browsers. In IE, the animation doesn't work at all. More troubling, in FF, the animation works but the rotation is not centered at the right location. What can I do to make it rotate correctly in FF? (Edit: It actually works correctly in FF 42alpha.) Is there anything I can do to get it to work in IE? (Targeting the current version of these browsers) The snippet below contains the

Use different @keyframes based on parent element class

由 非 Y 不嫁゛ 提交于 2020-01-11 09:46:12
问题 I have an animation like below: @keyframes pulseColorGreen { 0% { background-color: green; } 97%{ background-color: green; } 100% { background-color: white; } } My website also has a dark mode where the background goes black. Now in the animation, I want to display a darker green just like below: @keyframes pulseColorGreen { 0% { background-color: darkgreen; } 97%{ background-color: darkgreen; } 100% { background-color: black; } } For the dark mode, I add a class "lightsOff" in the body tag.

Background-position not working with CSS animation and linear gradient

由 那年仲夏 提交于 2020-01-09 12:07:07
问题 I'm attempting to use CSS3 (gradients and animations) to make an animation similar to the iphone slide to unlock gradient. However, for some reason, the background-position only works when I use static pixel numbers and not when I use percentages. Ideally, I'd be able to apply this class to any element, and have the animation work, without needing to code for specific widths. Can somebody point me in the right direction? JSFiddle: https://jsfiddle.net/ekLamtbL/ .slideToUnlock { background:

Background-position not working with CSS animation and linear gradient

由 好久不见. 提交于 2020-01-09 12:06:05
问题 I'm attempting to use CSS3 (gradients and animations) to make an animation similar to the iphone slide to unlock gradient. However, for some reason, the background-position only works when I use static pixel numbers and not when I use percentages. Ideally, I'd be able to apply this class to any element, and have the animation work, without needing to code for specific widths. Can somebody point me in the right direction? JSFiddle: https://jsfiddle.net/ekLamtbL/ .slideToUnlock { background:

Background-position not working with CSS animation and linear gradient

由 给你一囗甜甜゛ 提交于 2020-01-09 12:04:12
问题 I'm attempting to use CSS3 (gradients and animations) to make an animation similar to the iphone slide to unlock gradient. However, for some reason, the background-position only works when I use static pixel numbers and not when I use percentages. Ideally, I'd be able to apply this class to any element, and have the animation work, without needing to code for specific widths. Can somebody point me in the right direction? JSFiddle: https://jsfiddle.net/ekLamtbL/ .slideToUnlock { background:

Extend the final state of the first animation for translated element

由 时光毁灭记忆、已成空白 提交于 2020-01-09 05:38:26
问题 I know this is asked multiple times here, but I am asking for a different approach for these kind of animations. Problem: The 2nd box has multiple animations, trying to create the same effect as 1st one. It seems like the transform property is getting overwritten (as it should)* . I am trying to extend the 1st animation (of 2nd box) with the properties of 2nd animation. Tried to use animation-fill-mode: forwards but with no success. Maybe I am missing something basic. Is it possible with

Smooth shrinking animation

由 狂风中的少年 提交于 2020-01-08 06:21:04
问题 I would like to be able to shrink an HTML tag to make it disappear, and have a smooth disappearance for the remaining items (so that they don't jump where the tag used to be) const div = document.querySelector('.toGo'); div.addEventListener('click', event => { div.className += ' animate'; // Simulate Angular's DOM modification setTimeout(() => div.style.display = 'none', 1100); setTimeout(() => div.style.display = 'block', 1200); setTimeout(() => div.className = 'toGo', 1300); }); .toGo,

CSS animation restarts if I move the mouse when the container retracts. Can you avoid this?

由 為{幸葍}努か 提交于 2020-01-07 01:49:19
问题 I would like to keep the animation continuing till the end not restart when I move the mouse inside the element but the cursor (mouse pointer) is always inside the original element. Is it possible? My code is: Fiddle Demo .container{ height: 200px; width: 100px; } .conteiner li{ display: inline-block; float: left; text-align: center; height: 100%; width: auto; background-color: white; } .conteiner li a{ position: relative; display: flex; align-items: center; justify-content: center; padding:
订阅 css-animations