css-animations

问题 I'm working at a portfolio to show when I apply for my next study. Since we're living in 2012, it has tons of fancy animations and CSS3 junk, just to give them the 'We need this guy' feeling. I'm having a little problem at the moment. This is a small part of a specific element: /* This is the CSS of the elements with the id called 'fadein' */ #fadein { -moz-animation-duration: 2s; -moz-animation-name: item; -moz-animation-delay: 4.5s; -webkit-animation-duration: 5s; -webkit-animation-name:

问题 When I remove an item from a flexbox, the remaining items "snap" into their new positions immediately rather than animating. Conceptually, since the items are changing their positions, I would expect the transitions to apply. I have set the transition property on all involved elements (the flexbox and the children) Is there any way to animate edits (adds & deletes) to a flexbox? This is actually a showstopper for me and the one missing piece with flexbox. 回答1: I've fixed up @skyline3000's

问题 I'm making a simple landing page driven by CSS3. To make it look awesome there's an <a> plopping up: @keyframes splash { from { opacity: 0; transform: scale(0, 0); } 50% { opacity: 1; transform: scale(1.1, 1.1); } to { transform: scale(1, 1); } } And to make it even more awesome I added a hover animation: @keyframes hover { from { transform: scale(1, 1); } to { transform: scale(1.1, 1.1); } } But there comes the problem! I assigned the animations like this: a { /* Some basic styling here */

问题 I'm using css animations on my page and Safari seems to change unrelated font weights elsewhere on the page when animations are running. Any idea why this happens? All other browsers work fine, include webkit ones like Chrome. I've detailed the bug in a video here - http://www.screenr.com/gZN8 The site is also here - http://airport-r7.appspot.com/ but it might keep changing rapidly. I'm using compass (@transition-property, @transition-duration) on the arrow icons. No transitions applied on

问题 Is it possible to get/set the current animation percentage of a CSS3 @keyframes animation using javascript, jQuery, or some other means? Say for example there is a div with class called .spin that simply spins around in a circle using a keyframe also called spin . I have tried to get the current percentage value of the animation using $('.spin').css('animation') , $('.spin').css('animation: spin') , and a couple other ways, but they all alert empty I'm also interested in changing the original

问题 Is it possible to get/set the current animation percentage of a CSS3 @keyframes animation using javascript, jQuery, or some other means? Say for example there is a div with class called .spin that simply spins around in a circle using a keyframe also called spin . I have tried to get the current percentage value of the animation using $('.spin').css('animation') , $('.spin').css('animation: spin') , and a couple other ways, but they all alert empty I'm also interested in changing the original

问题 When giving e.g. a <div> a box-shadow as well as rotating it will cause a rotation of the box-shadow direction - which is problematic when the box-shadow should create an illusion of lighting. Example: https://jsfiddle.net/5h7z4swk/ div { width: 50px; height: 50px; margin: 20px; box-shadow: 10px 10px 10px #000; display: inline-block; } #box1 { background-color: #b00; } #box2 { background-color: #0b0; transform: rotate(30deg); } #box3 { background-color: #00b; transform: rotate(60deg); } #box4

问题 So, I understand how to perform both CSS3 transitions and animations. What is not clear, and I've googled, is when to use which. For example, if I want to make a ball bounce, it is clear that animation is the way to go. I could provide keyframes and the browser would do the intermediates frames and I'll have a nice animation going. However, there are cases when a said effect can be achieved either way. A simple and common example would be implement the facebook style sliding drawer menu: This

问题 If you see the code sample I have shared, you can see the overlay going outside the box. I traced the issue down to the transition attribute. I want to remove the content outside of the div. Overflow isn't working as it is supposed to. (removing transition works, but I would like to keep it if possible) Any help is appreciated Codepen Link CODE var timer = setInterval(function() { document.querySelector(".qs-timer-overlay").style.opacity = (document.querySelector(".qs-timer-overlay").style

问题 I am using WOW.js and animate.css, right now I am running my CSS to Infinite. I would like know how can I make my class run for 3 seconds stop and start again to infinite? My html: <img src="images/fork.png" class="fork wow rubberBand" > My CSS class: .fork { position: absolute; top: 38%; left: 81%; max-width: 110px; -webkit-animation-iteration-count: infinite ; -webkit-animation-delay: 5s; } The solution can be in JS or CSS3. 回答1: With pure CSS3 animations, one way to add a delay between