css-animations

问题 Let's say I have this javascript function: function pauseComp(ms) { var date = new Date(); var curDate = null; do { curDate = new Date(); } while(curDate-date < ms); } and a css3 animation (for instance, <i class="icon-spinner icon-spin"></i> from the new font-awesome 3). When I run the javascript function above, it stops the spinner while the function is running. See what I'm talking about here . Basically, javascript stops css animations, and I'm wondering why, or if anyone else has noticed

问题 I've implemented a hover effect on a h1 element (see code and pen below), but the effect is behaving strangely on mouse out and sort of flickering before going back to it's original state. Any ideas how to make it transition back to it's original color as smoothly as it fades in on hover? Thanks in advance. https://codepen.io/lobodemon/pen/YOXKNJ h1 { transition: 0.5s; } h1:hover { background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% 400%; color

问题 I found a cool, very simple text animation on a website that I would like to rebuild. Here is the link (the animation is in the footer of the page): http://www.motherbird.com.au/process/ I'm not familiar with CSS animations yet, but I've managed that so far: .animated{ display: inline; text-indent: 8px; } .animated span{ animation: topToBottom 5s infinite 0s; -ms-animation: topToBottom 5s infinite 0s; -webkit-animation: topToBottom 5s infinite 0s; color: red; opacity: 0; overflow: hidden;

问题 I'm rotating a div around a circular path with css, and I want to make it change color on hover. See demo here: http://jsfiddle.net/gg7tnueu/1/ html, body { height: 100%; margin: 0; } .planet { border-radius: 50%; border: 2px solid #1a1a1a; position: absolute; margin: auto; /*top: 50%;*/ -webkit-animation: orbit 6s infinite linear; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); animation: orbit 6s infinite linear; backface-visibility: hidden; transform: translateZ(0);

问题 I have an image with CSS property clip-path. I have added animation to rotate the clip path. I want to only rotate clip-path, not the image. From below code, you can get an idea of what I want to achieve. I did this to give you an idea of what I want to achieve. The problem with my code is that it takes a lot of time of manually set clip-path points on each keyframe. So Is there any short method to achieve the below code result without changing the points manually on keyframes? I want it to

问题 I am trying to make an animation on a button which change the color and background-color from white to black. I don't want any fade and so I found that I can use animation-timing-function: step . However when I use it the animation doesn't reach black, it stops at grey. .animated-play-btn { background-color: white; height: 50px; width: 200px; animation-timing-function: steps(2, end); animation-duration: 1s; animation-name: clipping_btn; animation-iteration-count: infinite; animation-fill-mode

问题 At the moment I have to list all variations: @-webkit-keyframes show { from { background-color: rgba(0, 0, 0, 0); } to { background-color: rgba(0, 0, 0, 0.8); } } @-moz-keyframes show { from { background-color: rgba(0, 0, 0, 0); } to { background-color: rgba(0, 0, 0, 0.8); } } […] You get the idea. Is there any way to write this shorter? Something like this that is not breaking it: @-webkit-keyframes show, @-moz-keyframes show {} 回答1: Not natively in CSS but you can accomplish this by using a

问题 http://jsfiddle.net/cD4Gr/1/ This is my animation code: @-webkit-keyframes silde_to_top { 0% { bottom: 0%; top: default; } 100% { bottom: default; top: 0%; z-index: 1000000; opacity: 0.5; } } #test{ -webkit-animation-name: silde_to_top; -webkit-animation-duration: 5s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }

问题 I've recently been looking into improving the animations on my website - more specifically of the navigation dropdown on mobile devices. In this connection I stumbled upon the following case, which I'm hoping to get some more in-depth knowledge about. The case is that when transitioning/animating transform: translate3d() it seems that the browser requires more calculations when it's applied using % rather than px . E.g. in my tests it seems that transitioning from transform: translate3d(0,

问题 I have created a modal box, and works fine! After, i resolve insert a fadeInUp effect, using css keyframes. But, after make this, the modal box lost the centered position. Can anyone help me resolve this? Thanks in advance! Modal box with keyframe conflit DEMO Original modal box DEMO 回答1: In your demo you added in a CSS animation which contained this: keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } This