css-animations

问题 I wanted to ask, what is wrong with this CSS code? It is used to animate background image - zoom effect. @media (min-width: 1000px) { .anim-on { background-size: 110% 110%; background-position: center center; animation: shrink 12s infinite alternate; } .anim-out { background-size: 120% 120%; background-position: center center; animation: small 6s infinite alternate; } @keyframes shrink { 0% { background-size: 110% 110%; } 100% { background-size: 100% 100%; } } @keyframes small { 0% {

问题 I created loading spinner in SVG, but animation-duration is not accurate. For example: 30s animation-duration ~ 26s in real 45s animation-duration ~ 38s in real 60s animation-duration ~ 51s in real I'm desperate and I don't know where there may be a mistake. Can you help me? Screen of spinner #1 Screen of spinner #2 - later <svg class="circle"> <circle cx="23" cy="23" r="20"/> </svg> Less: @spinnerSize: 46; svg.spinner { display: block; width: (@spinnerSize + 0px); height: (@spinnerSize + 0px

问题 This JSFiddle contains a CSS animation that works for me in Chrome, Firefox and Safari, but not IE 10. I know IE 10 doesn't need the -ms- prefix, so that can't be it. I can't see anything wrong with this: @keyframes snapVertical { 0% { background-position: 0 0; } 16% { background-position: 0 0; } 21% { background-position: 0 -136px; } 37% { background-position: 0 -136px; } 42% { background-position: 0 -272px; } 58% { background-position: 0 -272px; } 63% { background-position: 0 -136px; } 79%

问题 I'm trying to create a menu that is hidden off screen on the top of the document. There is a little portion showing that will be hoverable which will bring the rest of the menu into view. Trying to animate bottom to auto but it isn't working. Was wondering if someone knows how or better way to create a menu off screen similar to my codepen. http://codepen.io/anthony-dandrea/pen/EjqYqj .hud is the class that's giving me the animation problem. .hud { position: absolute; width: 100%; text-align:

问题 I can't get my animation to work smoothly. I've creating a burger icon, with three divs, like this: <div class="container"> <div class="burger-contain"> <div id="line-1" class="line"></div> <div id="line-2" class="line"></div> <div id="line-3" class="line"></div> </div> </div> I've got three different keyframes, for each line one. .line:first-child { animation-name: firstChild; transform-origin: 30px 25px; animation-duration: 0.5s; animation-fill-mode: forwards; margin: 10px; } Then the

问题 I have an animation, which is taking care of the fading in and out transition on button hover state. The problem is that the default animation ( -webkit-animation: off-state 1s; ) is firing off on page load. How do I make it active only after first hover state? I know how to achieve this using CSS transitions. I am looking for a solution using animation/keyframes. HTML <div class="button"></div> CSS .button { background: #000; width: 20px; height: 20px; -webkit-animation: off-state 1s; }

问题 I'm trying to recreate the following gif in pure css - Css here - http://codepen.io/anon/pen/FmCaL - (webkit/chrome only at the mo) I'm attempting to recreate the missing chunk of the circle by using the before & after psuedo selectors, but I can't get the angles right. Is it even possible to do? Is there a better approach? Thanks for any help so far. I should have specified that I need the arrow to be transparent. I can't use a solid color for the missing part of the circle. 回答1: How about

问题 I need to have a continuously running CSS @keyframe animation across elements that are dynamically added, destroyed and replaced via ajax/fetch. But binding an animation to a dynamically added element makes the animation restart from 0% every time the element is replaced. A partial solution is binding the animation to an unmutable parent element. The animation then will run continuously and affect any child elements, even if they are dynamically replaced. But this solution is limited in that

问题 I am having an issue with timing within a CSS keyframe animation. I have it 90% there, but am having a gap between each image on appearance. I know this is a timing issue, but I can't for the life of me get the gap to disappear without breaking the current functionality. Code so far: .slider { position: relative; height: 200px; width: 300px; background: gray; overflow:hidden; } .slide, .slide img { position: absolute; top: 0; left: 0%; height: 100%; width: 100%; } .slide h1 { position:

问题 I am building a slider using css3. Now slider is running continuously but the flow is not right. After slide 4 the slider is going back from left to right all the way down to the first slide. What I want after the last slide the first slide should come from right to left as it is coming in manner for other slide. Will it be possible by css only? @keyframes slide{ 0%{ transform:translateX(0px) } 25%{ transform:translateX(-200px) } 50%{ transform:translateX(-400px) } 75%{ transform:translateX(