css-animations

css @-moz-keyframes animation not working on firefox 18.0.1

由 空扰寡人 提交于 2020-01-19 05:56:31
问题 css @-moz-keyframes animation on firefox 18.0.1 is not working, I have checked this animation on previous version( forgot version previous number) , it was working, Here is the animation <html> <head> <style type="text/css"> @-webkit-keyframes animation { 0% { -webkit-transform:translate(100px,100px) scale(1); } 50% { -webkit-transform:translate(00px,00px) scale(2); } 100% { -webkit-transform:translate(100px,100px) scale(1); } } @-moz-keyframes animation_m { 0% { -moz-transform:translate

CSS3 keyframes animation on click (with addClass). How to restart CSS3 animation with adding css class?

由 ◇◆丶佛笑我妖孽 提交于 2020-01-17 09:19:48
问题 I have a problem. Im using Bounce.js to create nice menu animations (with some cool effects). Bounce.js using css keyframes animations which can be problematic to restart. I got menu and when I click a button and when .show class is added it should fire show animation. But when I press that button again hide class should be added with hide animation (which is just reverse version of previous animation). Js is working (classes are adding and removing properly) but animation is fired only once

Rotate 7 times then Ease

由 前提是你 提交于 2020-01-16 18:39:12
问题 Hello I am trying to animate an element so that it spins 7 times then slows down and eases I have the spinning done I just need to ease it. I am using a from and to keyframe to spin it, would I need to do it frame by frame or is there another way? @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } .spin.animated { animation-name: spin; animation-duration: 400ms; animation-iteration-count: 7; animation-timing-function: linear; } 回答1: You mean like this: .spin

Rotate 7 times then Ease

由 一个人想着一个人 提交于 2020-01-16 18:39:07
问题 Hello I am trying to animate an element so that it spins 7 times then slows down and eases I have the spinning done I just need to ease it. I am using a from and to keyframe to spin it, would I need to do it frame by frame or is there another way? @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } .spin.animated { animation-name: spin; animation-duration: 400ms; animation-iteration-count: 7; animation-timing-function: linear; } 回答1: You mean like this: .spin

Curved path Transform: translateX

由 匆匆过客 提交于 2020-01-16 09:41:14
问题 I'm trying to realize a css elliptical curve dot slider, and I got a satysfing result with transform: translateX , the problem is that the effect gets executed in a linear way. I want it executed in a curved way. When I click the dot the picture must slide following an elliptical path, this is my code: .container { position: relative; width: 80vw; height: 100vh; margin: auto; .wrapper { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; position: absolute;

CSS3 Animation + @keyframe run till the end

由 笑着哭i 提交于 2020-01-16 02:33:07
问题 I can't find the way to play an animation till the end when an element is :hover. When i :hover out, the animation reset - but i want it to continue till the end. JsFiddle <div class="picture"></div> .picture:hover { -webkit-animation:swing 1s ease-in-out; } @-webkit-keyframes swing { [...] } 回答1: Probably not a complete solution, but add the following to your picture class: -webkit-animation:swing 3600ms ease-in-out 6000s; -webkit-transform-origin:top; JsFiddle: http://jsfiddle.net/5SueS/4/

Stop CSS3 animation jumping

由 丶灬走出姿态 提交于 2020-01-14 10:29:27
问题 I have the following fiddle (Wekbit/Chrome only). Just watch the animation for a while and you will see it "stop" for a millisecond and then continues again. Could it be the svg file itself? If that is the case, how can I fix this file so the hiccup is gone? HTML <div class="tile10"></div> CSS @-webkit-keyframes move { 0% { background-position: 6px 0; } 100% { background-position: 6px 80px; } } .tile10 { width: 80px; height: 80px; position: absolute; background: url(http://www.mauricederegt

Can I use :hover to trigger a CSS3 animation (or transition) which keeps running even when the mouse is no longer hovering

由 橙三吉。 提交于 2020-01-13 09:47:08
问题 I'm creating a link list where one link container expands when hovering it ( with details, image and description). I have no problems to animate it with css transitions or animations. The problem is that I would like it to stay expanded even after the mouse moves away. And I would like to do it without javascript. Is that possible? Thanks! 回答1: No it's not possible because every css that will be applied on mouseover ( :hover ) will be removed on mouseout and there is no other way to capture

transform3d(): Using Percentage to Move Within Parent Object

由 耗尽温柔 提交于 2020-01-13 08:52:07
问题 CSS has standard behavior, when moving an object in percentage, that this percentage represents dimensions of its parent container (div). This is not true when using CSS3 transform: translate3d() . If using percentage values for either X, Y, or Z coordinate, the percentage represents dimensions of the current object , not its parent. The problem should be obvious now: if I need to use CSS3 animation and transform: translate3d() to move current object within dimensions of its dynamically re

How to scale from right to left in CSS?

由 梦想与她 提交于 2020-01-13 05:59:49
问题 I'm trying to animate scale a div element. But the animation starts from the center and spreads. Is it there a way animation to start from right and spread to left? .graybox { float: right; background-color: gray; height: 100px; width: 400px; line-height: 100px; -webkit-animation: main 250ms; -moz-animation: main 250ms; -ms-animation: main 250ms; animation: main 250ms; } @-moz-keyframes main { 0% { -moz-transform: scaleX(0); } 100% { -moz-transform: scaleX(1); } } 回答1: By default the
订阅 css-animations