css-animations

How can I start CSS3 Animations at a specific spot?

由 落花浮王杯 提交于 2019-12-01 04:10:50
I'm using CSS3 Animations, and I want to be able to move to a specific spot in the animation. For instance, if the CSS looks like this (and pretend that I used all the proper prefixes): @keyframes fade_in_out_anim { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } #fade_in_out { animation: fade_in_out_anim 5s; } then I would like to be able to stop the animation, and move it to the 50% mark. I guess that the ideal JavaScript would look something like this: var style = document.getElementById('fade_in_out').style; style.animationPlayState = 'paused'; // Here

Chaining Multiple CSS Animations

由 眉间皱痕 提交于 2019-12-01 03:21:47
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? Here is the full code: <!DOCTYPE html> <meta charset="utf-8"> <style> html, body { height: 100%; } body {

Rotate only the Border using CSS [duplicate]

由 99封情书 提交于 2019-12-01 03:15:21
This question is an exact duplicate of: CSS Animated Circles - Stop center content from rotating 1 answer I'm trying to rotate only the border using css but the font-icon is also rotating. How do I stop the rotation of the icon and make only the border? CSS: .circle { width: 100px; height: 100px; background: transparent; border-radius: 50%; border: 2px dashed #000; -webkit-animation-name: Rotate; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: Rotate; -moz-animation-duration: 2s; -moz-animation

How to add CSS AnimationEnd event handler to GWT widget?

由 不想你离开。 提交于 2019-12-01 03:01:20
问题 I would like my GWT widget to be notified when its CSS animation is over. In plain HTML/Javascript this is easily done by registering an event handler like so: elem.addEventListener("webkitAnimationEnd", function(){ // do something }, false); // add more for Mozilla etc. How can I do this in GWT? This type of event is unknown to GWT's DOMImpl classes, so I keep getting an error " Trying to sink unknown event type webkitAnimationEnd ". Thanks! 回答1: You can always write some of the native

How to move to the certain keyframe in CSS3 animation?

由 杀马特。学长 韩版系。学妹 提交于 2019-12-01 01:53:05
问题 Let's say we have an animation like here: http://jsfiddle.net/utterstep/JPDwC/ Layout: <div>back</div> <div class="animating"></div> <div>forward</div> And corresponding CSS: @keyframes someanimation { 0% { width: 100px; } 50% { width: 200px; } 100% { width: 100px; } } .animating { width: 200px; height: 200px; background-color: red; animation: someanimation 5s infinite; } And I want to go to the next or previous animation state when I press back or forward . There can be more than one object

How can I start CSS3 Animations at a specific spot?

由 元气小坏坏 提交于 2019-12-01 01:32:53
问题 I'm using CSS3 Animations, and I want to be able to move to a specific spot in the animation. For instance, if the CSS looks like this (and pretend that I used all the proper prefixes): @keyframes fade_in_out_anim { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } #fade_in_out { animation: fade_in_out_anim 5s; } then I would like to be able to stop the animation, and move it to the 50% mark. I guess that the ideal JavaScript would look something like this: var

Move multiple backgrounds infinitely using CSS

由 百般思念 提交于 2019-12-01 01:14:35
I have two backgrounds: body { background-image: url(img/nemo.png),url(img/ocean.png); } How do I make nemo.png background move infinitely from left-right but not affecting ocean.png background ? EDIT: When he reaches the right most edge (and the image is no longer visible), he will appear from the left edge again and start doing the drifting from left-to-right. This can be done with pure CSS 3, e.g keyframed animations : Demo: http://jsfiddle.net/dghsV/112 body { background-image: url("http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif"), url("http://images2

svg transform-origin problems in firefox

由 霸气de小男生 提交于 2019-12-01 01:09:28
excuse my terrible English. I'm having a problem when I want to animate an SVG in firefox. The problem comes from the "transform-origin" example of my code: http://codepen.io/anon/pen/JbOamB The problem is that in firefox, the animation is out of hand EJ: -moz-transform-origin:30% 20%; -ms-transform-origin:30% 20%; -o-transform-origin: 30% 20%; -webkit-transform-origin: 30% 20%; transform-origin: 30% 20%; Firefox is behaving correctly as per the spec. Chrome implemented transform-origin early before the spec finalised. It handles percentage values differently to what the final spec specified.

CSS3 animation is not working

由 佐手、 提交于 2019-11-30 23:38:45
问题 I have created an animation for SVG using css3 which is working perfectly in Chrome and Firefox. It is partially working in Safari but not working in Internet Explorer (IE9+ which support css animations) See Demo CSS: @-webkit-keyframes dash { 70%,80% { stroke-dashoffset: 0; fill-opacity: 0; } 85% { fill-opacity: 0; stroke-opacity: 1; } 95% { stroke: #17739D; stroke-dashoffset: -301; stroke-opacity: 0; } 100% { fill-opacity: 1; stroke-dashoffset: -301; } } @-ms-keyframes dash { 70%,80% {

svg transform-origin problems in firefox

由 怎甘沉沦 提交于 2019-11-30 20:33:38
问题 excuse my terrible English. I'm having a problem when I want to animate an SVG in firefox. The problem comes from the "transform-origin" example of my code: http://codepen.io/anon/pen/JbOamB The problem is that in firefox, the animation is out of hand EJ: -moz-transform-origin:30% 20%; -ms-transform-origin:30% 20%; -o-transform-origin: 30% 20%; -webkit-transform-origin: 30% 20%; transform-origin: 30% 20%; 回答1: Firefox is behaving correctly as per the spec. Chrome implemented transform-origin
订阅 css-animations