css-animations

问题 I am trying to create a @keyframe animation to bring a box up from the bottom of the screen and then have it bounce off the top of the body of the HTML document. The method that I used to do this doesn't allow you to change the speed during the duration of the animation which intern doesn't make it look very realistic ( See Code Below ). I have found an answer to my question the only problem is that I really don't understand how cubic-bezier is creating the animation. I would like to make

问题 I have 2 code snippets down below. In the first, I have beautiful stripes, they resizing themselves with the window size and are always centered (I try some animation but I don't get it like the animation from snippet 2) But I need an animation, this animation are showed in the second snippet, the stripes should come from below and go up and I would like to keep that in the final result. So I need a fusion with the first and second snippet. First: html, body { width: 100%; height: 100%;

问题 I have some loading bars done with CSS animations using keyframes. It works great in Chrome, but not in FireFox. I've double checked that all of the prefixes are correct, I've tried changing units and adjusting values, but nothing seems to make it work. Her's a codepen link: http://codepen.io/aviemet/pen/YPXzLQ and here's my sass: @-webkit-keyframes 'loadbars' { 0%{ height: 10px; margin-top: 25px; } 50%{ height:50px; margin-top: 0px; } 100%{ height: 10px; margin-top: 25px; } } @-moz-keyframes

问题 I want to create a ring-shaped process spinner with CSS3 or JavaScript, similar to the loading progress spinner in Android. The spinner should rotate continuously and be filled with a solid colour that fades out along the rim (i.e. a conical gradient) as in this picture: How can I achieve this? 回答1: This would be trivially easy if only CSS or SVG had conical gradients! Until the conic-gradient() notation matures and gains support, we can approximate the effect by slicing up the gradient and

问题 Can anybody help me create a loop animation transition with css transform. I have created a simple slider that uses transform to move items. the problem is when I move to right and the value of translate is from translate3d(-544px, 0px, 0px) to translate3d(-272px, 0px, 0px) it will have a transition from left to right, I want the transition effect to continue moving right to left when next button is click. and also do similar thing when the previous button is used. I'm pretty sure this is

问题 I'm looping through list of employee objects in which each object has imageUrl and I need to use that image url in the svg - Image <div *ngFor ="emp of employees"> <defs> <pattern id = "attachedImage" height = "100%" width = "100%" patternContentUnits = "objectBoundingBox"> <image href="{{emp.ImageUrl}}" preserveAspectRatio = "none" width = "1" height = "1"/> </pattern> </defs> <circle cx = "50%" cy = "50%" r = "35%" fill = "url(#attachedImage)"/> </div> I don't want to loop through all the

问题 I want to create a flip effect that fires on mouseover and flips back to the front panel on mouse out.. so there has to be a front and a back-side of the card that should flip: HTML: <div class="card"> <div class="front"> Front-Content </div> <div class="back"> Back-Content </div> </div> <div class="card"> <div class="front"> 2nd Front-Content </div> <div class="back"> 2nd Back-Content </div> </div> So as you can see I want multiple cards to flip to their back-sides on mouseover. I think the

问题 I want to create a flip effect that fires on mouseover and flips back to the front panel on mouse out.. so there has to be a front and a back-side of the card that should flip: HTML: <div class="card"> <div class="front"> Front-Content </div> <div class="back"> Back-Content </div> </div> <div class="card"> <div class="front"> 2nd Front-Content </div> <div class="back"> 2nd Back-Content </div> </div> So as you can see I want multiple cards to flip to their back-sides on mouseover. I think the

问题 I have a html/css/js modal working on a fadeIn and slideIn premise but I can't seem to make it do the reverse on a close...it simply makes a hard jump to being "not there." My close function in JS is simply taking the modal.style.display="none" but is there a way to access the @keyframes I've added in my css to make a smooth reverse? HTML: <h2>Bottom Modal</h2> <button id="button">Click Me</button> <div id="modal"> <div id="modal-content"> <div id="modal-header"> <span id="close">&times</span

问题 The following css animation works perfect in Chrome, Mozilla, Opera browsers but doesn't work in Internet Exporer 10 and 11. What's wrong? Please see http://jsfiddle.net/bm72w3n3/ .changed { -webkit-animation:target-fade 5s 1; -moz-animation:target-fade 5s 1; animation:target-fade 5s 1; } @-webkit-keyframes target-fade { 0% { text-shadow: 0 0 10px yellow; } 100% { -webkit-transition: text-shadow 0.2s linear; } } @-moz-keyframes target-fade { 0% { text-shadow: 0 0 10px yellow; } 100% { -moz