css-animations | 易学教程

How to animate a radial-gradient using CSS?

阅读更多关于 How to animate a radial-gradient using CSS?

问题 I am trying to create a radial-gradient shine affect to a div box and I am unsure whats the best way of doing so. I Have found no resources of achieving what I want to achieve; just shine affects which look like overlay. Most of the examples I have found looks like this http://jsfiddle.net/nqQc7/512/. Below I have displayed what I am trying to create. #shine-div { height: 30vh; width: 60vw; margin-right: auto; margin-left: auto; border-radius: 10px; /*background: radial-gradient(ellipse

CSS Animate text from left to right in div container with overflow hidden

阅读更多关于 CSS Animate text from left to right in div container with overflow hidden

问题 So i've recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript. Today i wanted to create something like this: Text moving from left to right I think this might be possible with CSS Animations. In theory, I have a div wrapper with position:relative, a fixed width and overflow:hidden. Inside, there is a div with position:absolute and left:0 and bottom:0. Now in some cases, the text is too long for the parent

Reverse SVG line drawing animation

阅读更多关于 Reverse SVG line drawing animation

问题 I'm trying to reverse how this SVG line animates. I need the line to draw from left to right but can only get it to work right to left. I tried changing the end point in illustrator but this only led to it drawing from both sides. How do I do this? You can see the animation here: http://mckeever02.github.io/voxbit/ This is the SVG: <svg viewBox="0 0 759.7 234.2"> <path class="phone-line" stroke="#fff" stroke-width="4" stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9

combining multiple css animations into one overall animation

阅读更多关于 combining multiple css animations into one overall animation

问题 I have a set of animations that I queue up one after the other to create a bigger overall animation. For the sake of simplicity, I've created a simple fiddle to demo what I mean, but it's a simplified version of what I'm trying to achieve (code on bottom)... http://jsfiddle.net/UnsungHero97/qgvrs/5/ What I want to do is combine all of these into one animation instead of several. Currently, I add a class to trigger the different stages of the animation, but what I would like to do is add a

How do I animate an element to swing in CSS3?

阅读更多关于 How do I animate an element to swing in CSS3?

问题 Since I saw the Treahouse website and the sign effect swinging in the tree, I have been trying to reproduce it. .box{ width:50px; height:50px; background: blue; box-shadow: 0 0 5px blue; margin:100px; float: left; -moz-animation: 3s ease 0s normal none infinite swing; -moz-transform-origin: center top; } But it won’t swing. Here’s a demo on JS Fiddle. I also tried a modification of that. bod{ background:blue; } .box{ width:50px; height:50px; background: yellow; box-shadow: 0 0 10px red,0 0

Clip child to parent element with border-radius

阅读更多关于 Clip child to parent element with border-radius

How do I force clip a child to a parent element that has rounded corners. <div class="item" > <div class="top"> <h1>Tile</h1> <h2>Click me</h2> </div> <div class="behind"> <h3>Details</h3> </div> </div> When animating the child, its ignores the border-radius of the parent element. Is there a way to fix the two corners on the top? .item{ text-align: center; cursor: pointer; overflow: hidden; height: 280px; width: 280px; float: left; border-radius: 5px; background: white; margin: 10px; position: absolute; } .top{ z-index: 1; position: absolute; height: 280px; width: 280px; background: #ed844b;

Do CSS animations work on strict time basis?

阅读更多关于 Do CSS animations work on strict time basis?

问题 That is to say, if I set an animation to take 1 second, will it always take exactly 1 second (i.e. skip frames in order to achieve that interval)? Part 2 of my question involves how to utilize CSS animations in asynchronous Javascript calls. I would need to be able to recall the animation once it had completed. 回答1: The times are not guarenteed to be exactly correct. To demonstrate, I setup a test case that shows times vary a bit from the 1 second mark. As for the second part of your question

Sprite animation wobbly / jumping in IE11

阅读更多关于 Sprite animation wobbly / jumping in IE11

I built a semi-transparent sprite png which can be found at https://www.srf.ch/static/srf-data/test_sprite.png It is a 17280px high and 910px wide png (30 * 576 = 17280) - everything seems correct. I now want to loop through each frame (it should be a map of slightly moving points) with CSS3 keyframes using background-position . I adapted an example from https://builtvisible.com/3-logical-alternatives-to-animated-gifs/ (see http://codepen.io/tombennet/pen/oxmaLd ) I can reproduce that example, when I try to adapt it to my needs (i.e. my sprite), I get this: http://codepen.io/anon/pen/rmwwMG

CSS keyframe animation with translation transform snaps to whole pixels in IE 10 and Firefox

阅读更多关于 CSS keyframe animation with translation transform snaps to whole pixels in IE 10 and Firefox

问题 It appears both IE 10 and Firefox snaps elements to whole pixels when animating their position using translate 2d transform in a css keyframe animation. Chrome and Safari does not, which looks a lot better when animating subtle movements. The animation is done the following way: @keyframes bobbingAnim { 0% { transform: translate(0px, 0px); animation-timing-function:ease-in-out } 50% { transform: translate(0px, 12px); animation-timing-function:ease-in-out } 100% { transform: translate(0px, 0px

Firefox only runs the CSS animation once

阅读更多关于 Firefox only runs the CSS animation once

I'm building an open source tab system for beginners to start off with. I think i've found a bug in how Firefox renders CSS animations. Tab animations only fire once in firefox I am using Dan Edens animate.css to do the animation for each tab. Everything works fine in Chrome, and Safari however firefox only runs the animation once and then never triggers it again. Take a look at the following demo on jsfiddle to see exactly what i'm talking about: http://jsfiddle.net/jsheffers/vqdJK/ $('#tabs li a').click(function(e){ $('#tabs li, #content .current').removeClass('current'); $(this).parent()