css-animations

问题 I made an CSS slideshow with 3 images animated by keyframes that makes a fade in/out effect. So far, so well. But there's a problem with the animation on the second loop of the slideshow. Im going to explain my best: the first loop animation works perfectly, but once the first image come back again there's a fade to white on all the slides that I like to avoid. I don't understand why the first loop works perfectly and then the other loops have this fade to white issue. You can see this

问题 I have the following animation: https://svgur.com/i/6XH.svg If you click on the link, you will see that it starts playing once you hover it. However, when I load the svg on a page using the image tag, as done below, the hover event doesn't seem to reach the svg image. Is it possible to do this somehow? It is not an option to paste the svg directly in the html page, because the software I use don't allow for that. 回答1: Images by design do not expose a DOM and their content cannot receive mouse

问题 I have an animated canvas to create a noise effect on the background. Short explanation of my code is following: using for loop I am drawing 1px X 1px squares (dots) around canvas at random. It creates a static noise (grain). Later, I animate it with requestAnimationFrame . My problem is that if I set the original size of the canvas to whole viewport, the browser can not handle huge drawing space and animation becomes extremely sluggish. So I need to keep the original size of canvas small,

问题 I have an animated canvas to create a noise effect on the background. Short explanation of my code is following: using for loop I am drawing 1px X 1px squares (dots) around canvas at random. It creates a static noise (grain). Later, I animate it with requestAnimationFrame . My problem is that if I set the original size of the canvas to whole viewport, the browser can not handle huge drawing space and animation becomes extremely sluggish. So I need to keep the original size of canvas small,

问题 I have made a typing animation in CSS. I have an issue with the letter not showing up fully. Trying to make "m" as one letter, Also animation to feel more natural. It needs to look like someone is typing. need help to animate each letter in the "remirror" separately and make it look like someone is typing so each key comes in slightly off time. https://codepen.io/shahil/pen/ZEGwMxQ @font-face { font-family: danub; src: url(https://cdn.getforge.com/remirror.getforge.io/1585586993/danub.ttf); }

问题 I'm using CSS animations (from animate.css) in a project I'm working on. What I found out is that when fading in a container with an absolutely positioned and z-indexed child in it, the z-index of the child isn't working as it should. I recreated the issue in this fiddle: http://jsfiddle.net/Lxsf9ako/ The issue seems to be caused by animation-fill-mode: both; This style is placed on the container by animate.css, thus I have no control over this. I could overwrite it by using animation-fill

问题 I found possible issue(or may be it is feature =)) in chrome 75 version. Changes of transform origin during of transform animation doesn't affect on animation. I attached snipet which contains two loops, one changed transform, another changed transform origin. For example: In changelog for 75 version I found this commit which probably related to this issue: commit const div = document.getElementById('div'); const stat1 = document.getElementById('stat1'); const stat2 = document.getElementById(

问题 I am trying to achieve a background transition where, when you click on a tab the background of the current tab slides to the tab that is clicked. Can anyone help? *, *:before, *:after { box-sizing: border-box; } .radio_wrap {} input { position: absolute; opacity: 0; } label { min-width: calc(100% / 4); position: relative; float: left; text-align: center; text-shadow: none; padding: 20px; border: 1px solid #dfe0e4; color: grey; font-size: 14px; position: relative; transition: background-color

问题 I have a DIV which changes bgcolor to blue when :hover. Button click adds class which animates bgcolor to green. But now :hover wont work (bgcolor wont change to blue). Why? http://jsfiddle.net/EstSiim/me7t055c/ HTML: <div class="box"></div> <button class="animate-btn">Animate</button> CSS: .box { background-color: red; width: 200px; height: 200px; } .box:hover { background-color: blue; } .trigger-bg-change { -webkit-animation: bg-change 1s ease 0 1 forwards; animation: bg-change 1s ease 0 1

问题 I'm trying to animate an SVG circle's radius attribute with CSS. Whilst (using the Firefox Inspect Element tool) I can see that the animation itself is setup and running correctly, the size of the ".innerCircle" doesn't visibly change. If you can spot anything that I've obviously missed, or help in any way I'd be greatly appreciative. I'm rather new to this, so if I have gone about this wrong, please be kind! I've pasted my files underneath for reference. Thanks again. @keyframes