css-animations

问题 http://jsfiddle.net/cD4Gr/4/ Le Code: $j(document).bind('click', function() { $j("#test").css({ bottom:0px }) }); Looking in the inspector, even when the element is at the top of the page, it still says it's bottom value is 0. Maybe I need to play the animation in reverse somehow? or play a different animation? (Using Bottom %, rather than top %) 回答1: As you were thinking you can make a second keyframe block to reset it back to the bottom: @-webkit-keyframes reset_to_bottom { 0%, 100% { top:

问题 I have two div elements that I want both to puslate (CSS animation) if mouse hovers on any one of them. There a simple code following. In my page they are not next each other. The above code does not works. jsfiddle: http://jsfiddle.net/GcyqL/1/ CSS: #counter { width:120px; height:25px; text-align: center; border-style: solid; border-width: 1px; background-color: rgb(142, 197, 255); font-weight: bold; } #mem_val { width:120px; height:25px; text-align: center; border-style: solid; border-width

问题 I have two div elements that I want both to puslate (CSS animation) if mouse hovers on any one of them. There a simple code following. In my page they are not next each other. The above code does not works. jsfiddle: http://jsfiddle.net/GcyqL/1/ CSS: #counter { width:120px; height:25px; text-align: center; border-style: solid; border-width: 1px; background-color: rgb(142, 197, 255); font-weight: bold; } #mem_val { width:120px; height:25px; text-align: center; border-style: solid; border-width

问题 For the project I'm working on, I have to be able to depict values from -100% to 100%. Is there any way that I can take an existing percentage circle such as the one below and make the progress indicator go backwards - as in counterclockwise? <div class="flex-wrapper"> <div class="single-chart"> <svg viewbox="0 0 36 36" class="circular-chart orange"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke

问题 Please see the code below for a simple keyframe animation on hover. .behind { width: 200px; height: 200px; background: red; position: absolute; } .infront { width: 200px; height: 200px; background: blue; position: absolute; } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } } .infront:hover { animation: fadeOutLeft 2s; } <div class="behind"></div> <div class="infront"></div> This looked to be working on hover, however when moving the mouse

问题 Recently I began experimenting with CSS Animations over an SVG definition created by someone else and I found something I could n't solve by myself. And given my little about SVG, it was hard to Google a solution. Here's what I've got: @charset "utf-8"; body, html{ height: 100%; } main { flex: 1 1 auto; } .box { max-height: 600px; max-width: 600px; padding: 10px; } svg { height: 100%; width: 100%; } svg path { fill: #0f68e0; } .left { transform-origin: 190px 555px; /*animation: spin-reverse

问题 I am trying to make loader which will look like this on CodePen But I need to have rounded borders, and rectangle, not a box. So I will be able to place the logo of our company to the loader. I tried to make one more layer, which will be making inline radius and to the wrapper, I set border-radius and overflow: hidden . But, the animation looks horrible And isn't smooth. Can you please help me, to make this animation better? Or did you create something similar? UPDATE CODE SASS I am still

问题 I am trying to use some SASS variables to change a CSS animation, but it seems to be rejecting everything I try. I've tried formatting it as a mixin, too, but without success. $waitTime and $fadeTime are initialized to 4.5 and .5 respectively, much farther above the following snippet: @keyframes fadeLoop{ 0%{ height: auto; transform: translate(-10%, 0); opacity: 1; } (($waitTime/(($waitTime + $fadeTime)*10))*100) + %{ transform: translate(10%, 0); opacity: 1; } ((($waitTime + $fadeTime)/((

问题 I try to animate a sprite with auto fullscreen size but I don't know how can I do to read this sprite always in fullscreen (i.e. 100% of width and height of screen, and auto adapte if resizing) any idea to autosize sprite ? @-moz-keyframes play { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-webkit-keyframes play { 0% { background-position: 0%; } 100% { background-position: 100%; } } @keyframes play { 0% { background-position: 0%; } 100% { background-position: 100%;

问题 I have a div element, which has an animation to play when starting the page. I want to make it have another animation to play when I'm hovering over it. It works just fine, but when I get my mouse out of the div element, it plays the starting animation again (fades in from out of the screen). @keyframes div{ 0%{ opacity: 0; } } @keyframes divHover{ 50%{ top: 200px; } 100%{ top: 0px; } } #div{ opacity: 1; animation: div 1s; position: absolute; left: 0px; top: 0px; } #div:hover{ animation: