css-animations

问题 So I was able to create a 'flip-card' element; however, my issue is that I am trying to scale the entire element using transform: scale() so that about halfway through the rotation, I want the element to begin expanding to a bigger size/scale. Just not sure if I use animations, multiple animations, or transitions only...or transitions + animation...just a bit confused what is the most effective approach. I tried animations + transitions, like shown below, and it's very glitchy and acting

问题 Consider the following fiddle: http://jsfiddle.net/a7EVf/5/ Is it possible to have the div rotate through (effectively to 360 degrees instead of 0) on hover out instead of moving back counterclockwise? I would rather NOT use JavaScript (including jQuery) if possible - I realize it would be simple enough to set transform: rotate(360deg); /*also the vendor-specific versions*/ on the original using JS (and once it reaches 360 reset it to 0 without a transition), but is it possible to do this

问题 I am trying to make an animation play reverse when hovering an element. It does not work, I don't understand why and how to get it to work. The "animation" just jumps back to keyframe 0% without any animation. The snippet works only as intended in Chrome and Safari. http://codepen.io/anon/pen/YpBaZq div { -webkit-animation-fill-mode: forwards; animation-duration: 2s; animation-name: a; background-color: #a00; display: inline-block; padding: 50px; } div:hover { -webkit-animation-fill-mode:

问题 I made this http://codepen.io/adamchenwei/pen/dOvJNX and I try to apply a certain way of moving for a dom so it move for a fixed distance and stop, instead of animate and move through the whole width of the dom. However, I don't really want to fix the distance inside the css keyframe because I need to detect that distance dynamically, since my div that got animated ideally will change the width dynamically as well since that is not going always be 100% or any specific px fixed. Is there way I

问题 This is my 'very first' foray into keyframe animation. I was put off before by the alleged inability to dynamically change hard coded CSS values on the fly via JavaScript. I Googled around a bit to find it 'can' be done but with a lot of fiddly work finding, removing and replacing parts of or whole stylesheets. Anyway, here's my effort. The eventual goal of this particular script is to be the bounce of clock hand. I can already do this with transition and cubic bezier but can only get one

问题 I need to animate height, and set overflow: hidden for the first keyframe, and overflow: visible (and keep it) for the last one. I'm trying this, but at the end, overflow is still hidden . How can I solve this issue? The 2 includes are merely SCSS polifill mixins. @include keyframes(open) { 0% { height: 0; overflow: hidden; } 100% { height: $main_menu_height; overflow: visible; } } #main-menu-box { overflow: hidden; height: 0; &.opened{ @include animation('open 200ms ease-out 0s 1 normal

问题 Is it possible to pause animations in Angular 2+? I would like to pause an animation upon mousing over an element and resume the animation from where it left off when mousing out. I have created a simple script to demonstrate: https://stackblitz.com/edit/scrolling-text Here's my component: import { Component, ElementRef, ViewChild } from '@angular/core'; import { trigger, state, style, animate, transition } from '@angular/animations'; @Component({ selector: 'my-app', template: ` <div class=

问题 How can I detect changes made by CSS3 animations or web animations ( Element.animate )?? (Sorry for my bad English! this is my first question in Stackoverflow) I know about MutationObserver, it responds only if I change the inline style or if I use requestAnimationFrame (since I change the inline style using it). But if I use CSS3 animations or Web animations, MutationObserver doesn't respond since they don't change the inline style. See this... There are two divs here... div1, div2. div1's

问题 I am trying to fade out an element, keep that element faded out for, say, 5 seconds, then fade back in the element. I am trying to achieve this using only CSS and not jQuery. Currently I have set two elements to start fading after 2 seconds, have a fade duration of 2 seconds and then reappear as soon as the duration ends. Here's a fiddle. And the code: CSS: .hideMe1{ animation:hideMe 0.5s 1; -webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */ animation-fill-mode: forwards;

问题 Basically I'm trying to show an animation on certain elements that were affected in a "most recent action". After this animation completes it shouldn't play again. The problem I have at the moment is that I also define an animation which runs when the element(s) are "selected". When the element is deselected the original animation plays again, even if the animation-iteration-count of 1 has been reached. I could certainly set up an event listener for when animationend fires and then remove the