Updating animation-duration in Javascript
来源： https://stackoverflow.com/questions/28242013/updating-animation-duration-in-javascript
webkit-animation
run keyframes-animation on click more than once
问题 i have a div that it have image content .i wanna implement animation when i click in image but it do only with first click and next click in image is Ineffective.what is problem and how can i solve it? $(function () { $('div.c').bind('mousedown', function () { var $elem = $(this); $elem.stop(true) .css({ "-webkit-animation-name": "xi", "-webkit-animation-duration": "3s", "-webkit-animation-timing-function": "ease", "-webkit-animation-delay": "1s", }) })}) and @-webkit-keyframes xi{ 0% { left:
-webkit-animation stops when scrolling on mobile safari
问题 I'm making a css3 loading animation for a mobile website. The loader works just fine by using the following HTML / CSS: HTML: <div class="loader"></div> CSS: .loader { background-color: rgba(0,0,0,0); border: 6px solid rgba(0,0,0,0.75); opacity: 0.5; border-top: 6px solid rgba(0,0,0,0); border-left: 6px solid rgba(0,0,0,0); border-radius: 60px; box-shadow: 0 0 5px rgba(0,0,0,0.5); width: 60px; height: 60px; margin: 0 auto; -moz-animation: spin 1s infinite linear; -webkit-animation: spin 1s
Difficult to stop infinite CSS animation in Android browser
问题 I'm having little luck stopping or pausing an animation in Android 4.x browser / webview. I have -webkit-animation-iteration-count set to infinite and it's no problem stopping it in Chrome/Safari, but it fails in Android if the element has animated children. My HTML: <div id="css-container" onclick="stopAnim();"> <div id="content">Content</div> </div> My JS: function stopAnim() { // cssContent.classList.toggle('css-container-anim'); cssContainer.classList.toggle('css-container-anim'); } var
Animation cards Javascript and CSS
问题 I would move cards on click and put them on the green table with animation of transition; then when cards are on the table, when i click on them, they must show their front face, and then return with back face. The code doesn't work, i see the back cards on the left of the page but when i click on nothing happens. var card_value = ['1B', '2B', '3B', '4B', '5B', '6B']; var card_left = []; var card_top = []; for (i = 0; 1 & lt6; i++) { card_left = 70 + 100 * (i % 4); card_top = 15 + 120 * Math
Changing -webkit-animation-play-state with javascript
问题 Hi I have been trying to figure out how to change my css3 -webkit-animation-play-state from paused to running by clicking on another div. Does any one know how I would do this?? Im assuming I would need to use JavaScript. 回答1: I don't think you're able to do it unless you use JavaScript. Using JavaScript, you would have to fetch the style.webkitAnimationPlayState of the element you wish to change. If it's an empty string, then it is set to the inital value, which is "running" . In the example
Trigger css3 keyframes using jquery
问题 I wrote a keyframe animation: @-webkit-keyframes cubemove { 0% {-webkit-transform: translateZ(-194px) rotateY(0deg);} 20% {-webkit-transform: translateZ(-194px) rotateX(-180deg);} 40% {-webkit-transform: translateZ(-194px) rotateX(-90deg);} 60% {-webkit-transform: translateZ(-194px) rotateX(90deg);} 80% {-webkit-transform: translateZ(-488.5px) rotateY(90deg);} 90% {-webkit-transform: translateZ(-488.5px) rotateY(-90deg);} 100% {-webkit-animation-play-state:paused;} } .cubebox { -webkit
Trigger css3 keyframes using jquery
I wrote a keyframe animation: @-webkit-keyframes cubemove { 0% {-webkit-transform: translateZ(-194px) rotateY(0deg);} 20% {-webkit-transform: translateZ(-194px) rotateX(-180deg);} 40% {-webkit-transform: translateZ(-194px) rotateX(-90deg);} 60% {-webkit-transform: translateZ(-194px) rotateX(90deg);} 80% {-webkit-transform: translateZ(-488.5px) rotateY(90deg);} 90% {-webkit-transform: translateZ(-488.5px) rotateY(-90deg);} 100% {-webkit-animation-play-state:paused;} } .cubebox { -webkit-animation: cubemove 30s ease-in-out 5s 1 normal; } I want to run this animation on a rectangle I made using
run keyframes-animation on click more than once
i have a div that it have image content .i wanna implement animation when i click in image but it do only with first click and next click in image is Ineffective.what is problem and how can i solve it? $(function () { $('div.c').bind('mousedown', function () { var $elem = $(this); $elem.stop(true) .css({ "-webkit-animation-name": "xi", "-webkit-animation-duration": "3s", "-webkit-animation-timing-function": "ease", "-webkit-animation-delay": "1s", }) })}) and @-webkit-keyframes xi{ 0% { left: 100px; } 40% { left: 150px; } 60% { left: 75px; } 100% { left: 100px; }} Max Girkens You could reset
CSS translation vs changing absolute positioning values
Iv'e been writing a webapp for iPad and other tablets and after a lot of viewport issues as far as proper and efficient positioning and animation is concerned. I recently came up with the idea of using -webkit-transform for all my free floating elements. My question is, Would using the transformations provided by the CSS spec be better for smooth and reliable animations than for example changing the lrtb values inside position:relative elements? With hardware acceleration on, I'm finding random blinking happening in moving elements, especially during changes in orientation. (absolutely