css-animations

问题 I am trying to implement a text loading animation with CSS . what I have is a text with black color, then when the page loads the text will fill start filling with a red color over several seconds. The issue I am facing is that the text loading animation is working fine, but when the text ends and begins with a new line the animation text still continues on the same line. How can I fix this? code: body { background: #3498db; font-family: sans-serif; } h1 { position: relative; color: rgba(0, 0

问题 I have a clock face of circles that I want to appear in order after 1 sec, so grow the first one to full size from zero, then after 1 sec, the second, then after 1 sec, the third etc etc. (the circle needs to expand centrally) This is my circle (there will be 12 in total like this): <div id="research-area"> <a class="research-circle rs-<?php echo $counter; ?>" href="<?php echo the_permalink(); ?>" style="background-image:url(<?php echo the_field('icon'); ?>);"></a> </div> There's a counter on

问题 I've got a strange behavior when adding a CSS animation on top of the transition for a progress bar element: the transition just stops executing. Not sure why I cannot have both, an initial animation and the transition when changing the element's width. The whole thing looks like this: HTML: <div class="container"> <div class="bar"></div> <div class="actions"> <button id="btnResize">Resize bar</button> </div> </div> CSS: .bar { height: 3px; width: 300px; background-color: blue; position:

问题 I'm pretty sure it's possible to do a css only image crossfade using the new css animation features. My requirements are that it should work for arbitrary number of images without javascript. Does anyone know how it's done? How I'm starting off: img(src='img1.png') img(src='img2.png') img(src='img3.png') img(src='img4.png') Next all the images are set to stack on top of each other with the first one showing: img opacity 0 transition 1s position absolute &:first-child opacity 100 Now how do I

问题 Is it possible to transition the items in an flexbox? When you click I want all items to collapse except the one that is clicked. The one that is clicked should use all available space from the container. // only works once! $(".item").click(function() { $(".item").not(this).each(function() { $(this).addClass("collapse"); }); }); html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; } .container { flex-grow: 1; flex-shrink: 0; flex-basis: auto; display:

问题 I've got a simple css animation that I'd like to play and then stop on the last frame fully displaying the image. But currently at the moment it plays then seems to revert back to frame one so the santas face disappears. How can i make it play through once then stop on the last key frame or display the image without it fading out again? http://jsfiddle.net/uy25Y/ <img class="santaface" src="http://imgs.tuts.dragoart.com/how-to-draw-a-santa-face_1_000000001282_3.jpg"> .santaface{ opacity:0;

问题 I want to create an expand/collapse animation that's powered only by classnames (javascript is used to toggle the classnames). I'm giving one class max-height: 4em; overflow: hidden; and the other max-height: 255em; (I also tried the value none , which didn't animate at all) this to animate: transition: max-height 0.50s ease-in-out; I used CSS transitions to switch between them, but the browser seems to be animating all those extra em 's, so it creates a delay in the collapse effect. Is there

问题 I'm working on a css animation that uses 'cogs and chains', but am unable to create a 'smooth' border rotation sequence. You can see in this fiddle How (currently) I'm using a pseudo element to generate a 'rotation' effect. This is done by 'switching' between a dashed white and dashed gold colored border, making it seem like the 'border is rotating'. What I have #one{ -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: rotateClockwiseAnimation 5s

问题 I know this question has probably been asked million times here in SO, but Ive tried most of the solution, I just dont know why it dont work for me. So I have a dropdown with display initially targeted to none . When I click on it, it shows nice transition. (So far so good). But when I click on it again to go hide the dropdown, it hides immediately, but I dont want that. I want to hide with similar transition that was assigned to show. Here is my code for CSS: .dropdown-menu { padding: 0 0;

问题 I'm trying to delay the trigger of a CSS animation (not slow down the animation itself, but delay it a few seconds before starting). And the image should not display before the animation runs. I looked through the other questions, and they don't seem to address this. MY FIDDLE: http://jsfiddle.net/omarel/guh5f8bs/ CSS .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out;