css-animations | 易学教程

Can I animate multiple css transform properties separately using keyframe animation

阅读更多关于 Can I animate multiple css transform properties separately using keyframe animation

问题 I want to animate two (or more) css transform properties separately using keyframe animation like this: @keyframes translatex { 100% { transform: translateX(100px); } } @keyframes rotatez { 100% { transform: rotateZ(80deg); } } HTML: <div class="rect"></div> translatex animation should start with 0s delay and last for 5 seconds. rotatez animation should start with 1s delay and last for 3 seconds. So .rect element starts moving, then after 1 second it starts rotating, then after 3 seconds it

How to stop CSS3 transition

阅读更多关于 How to stop CSS3 transition

I want to stop a transition that is in progress. I have found a few references[1][2] scattered around the internet but I can't seem to piece it together. Here's a fiddle of the first suggestion (With jQuery and CSS Transit for context): http://jsfiddle.net/thomseddon/gLjuH/ Thanks [1] https://twitter.com/evilhackerdude/status/20466821462 [2] github.com/madrobby/zepto/issues/508 So I figured it out: http://jsfiddle.net/thomseddon/gLjuH/3/ The trick is to set each css property you are animating to its current value (possibly mid transition) like: $(this).css('prop', $(this).css('prop'));

Is there a way to have pi in a CSS calc?

阅读更多关于 Is there a way to have pi in a CSS calc?

I have an SVG circle animation for a progress bar where the stroke-dashoffset is animated from 0,radius to radius,0 (for 0% to 100%). The equation for the length of the circumference of a circle is pi * d . Is there a way to use a CSS calc function where it can use a value of pi, rather than just a rounded value (like 3.14)? There's no such thing as a PI variable in CSS, unfortunately. However .. You can make use of CSS variables to assign a number to it, downside to this is that it has a really, really bad browser support. This would work like: :root { --PI: 3.14159265358979; // enter the

Dynamically create and apply CSS3 animations

阅读更多关于 Dynamically create and apply CSS3 animations

The .animate() function in jQuery does not allow all CSS3 animatable properties to be animated (for example, background-color ). Is there a nice, standard way to dynamically create, apply, and remove CSS3 animations to elements on the page? I'm currently following the example here but this is clunky and feels wrong. While it works, I would rather a better solution (using a library or something like that). Yes, we can dynamically create, apply and remove CSS3 animations to an element in the page. To dynamically create an animation, we need to use the insertRule or addRule functions to add the

Chaining Multiple CSS Animations

阅读更多关于 Chaining Multiple CSS Animations

问题 I am trying to chain together 2 CSS animations, see pen: http://codepen.io/jdesilvio/pen/pjwvyO I have followed the syntax provided in other answers to similar questions , but they don't seem to work correctly: animation-name: falling, laydown; animation-duration: 2000ms, 1000ms; animation-timing-function: ease-in, ease-out; animation-iteration-count: 1, 1; It is playing the second animation, then the first and finally the second one again. How can I get it to play the first, then second?

Ring-shaped process spinner with fading gradient effect around the ring

阅读更多关于 Ring-shaped process spinner with fading gradient effect around the ring

问题 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

How do I prevent Safari css keyframe animation flicker?

阅读更多关于 How do I prevent Safari css keyframe animation flicker?

I've tried everything from adding extra keyframes (0%, 1%, 100% or 0%, 99%, 100%) to setting -webkit-animation-fill-mode to forwards to the oft-mentioned -webkit-backface-visibility: hidden; trick mentioned in other threads, but I'm still seeing a flicker in my css keyframe animation at the start of almost every animation iteration in Safari 7 (both desktop and iOS). Chrome seems to be flicker-free. JSBin: http://jsbin.com/julor/2/edit HTML: <div class="ripple"></div> CSS: body { background-color: #90CBEA; } .ripple, .ripple:before, .ripple:after { background-image: radial-gradient(circle at

CSS animate a div with absolute positioning from left 0 to right 0

阅读更多关于 CSS animate a div with absolute positioning from left 0 to right 0

Consider this sample. http://jsfiddle.net/dfabulich/ncbzz5zu/3/ <html> <body> <style> .container { position: relative; width: 80%; height: 100px; border: 1px solid black; } @keyframes slide { from { background-color: red; left: 0; } to { background-color: blue; right: 0; } } .animated { position: absolute; width: 20%; height: 100%; top: 0; background-color: red; animation-duration: 3s; animation-name: slide; animation-iteration-count: infinite; } </style> <div class=container> <div class=animated> </div></div> Expected: The red rectangle should smoothly animate from left to right as the color

Animate an element on a sine path

阅读更多关于 Animate an element on a sine path

问题 I neeed to move an element on sine wave or path as shown in above image. I made something. But it is not working as I want. img { position:absolute; animation: roam infinite; animation-duration: 15s; } @keyframes roam { 0% { left: 50px; top:100px } 10%{ left:100px; top:100px } 20%{ left:200px; top:200px } 30%{ left:300px; top:50px } 40%{ left:400px; top:200px } } <img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png"> 回答1: You can move an element on a

Pure CSS countdown animation

阅读更多关于 Pure CSS countdown animation

问题 I'm trying to do a pure HTML/CSS countdown animation but I'm struggling to make it work smoothly. For now I'm only covering minutes and seconds. Notice that I'm using animation-delay property for resetting my countdown to a certain initial time. For now everything is working fine, except the digit corresponding to the x10 minutes which is not changing sync with the rest of the digits. Following I will paste my code and two codepens, a first normal version with the correct timings for a normal