css-animations

问题 This question already has answers here : How to apply multiple transforms in CSS? (9 answers) Closed 3 years ago . I'm trying out the css animation using @keyframes, however the css Transform rotate and translate properties aren't working together. Please advise on what has gone wrong here. Thanks!! You can check the code on codepen: http://codepen.io/anon/pen/XdzwZB following is my @keyframes code: @keyframes slideIn { 0%, 100% { transform: translate(10px); transform: rotate(0deg); color:

问题 There's an icon in the Font Awesome set that I want to flip horizontally and then spin in that direction, which is the opposite of the regular spin effect. There are a number of ways to do each, but none that I know that will do both since the effects seem to cancel each other out? If I flip it, .fa-refresh { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } then animate it, .icon-spin-reverse {

问题 I have a flexbox layout of boxes. The boxes expand to full screen when they are clicked on. The problem is that when the box expands, it moves the other flex elements causing the animation to look jumpy. The flex layout also keeps the expanded box from touching the top of the screen. Here is a fiddle to show you what I am talking about fiddle Box 1 is actually pretty close to the desired effect, but it still jumps around like I described above. I have tried setting all of the unclicked cards

问题 Here is my code .circle { border: 1px solid transparent; border-radius: 50%; width: 100px; overflow: hidden; } .div7 { width: 100px; height: 10px; background: red; color: white; font-weight: bold; position: relative; animation: mymove 6s infinite ; } .div6 { width: 100px; height: 10px; background: red; color: white; font-weight: bold; position: relative; animation: mymove 6s infinite ; margin-top:5px; } .div1 { width: 100px; height: 10px; background: red; color: white; font-weight: bold;

问题 I have an image that swings using CSS rotate animation. I would like to stop it smoothly (and put it back to its original position when clicking on another element but without getting the jumpy stop feeling). It seems that the expected behaviour only happens on the first iteration of the animation but not on the upcoming ones (this is when clicking on the "slow" button during the first 2 seconds) Here is a sample code https://jsfiddle.net/pbarrientos/5v3xwak6/ I have already tried adding

问题 Is there a way to change the duration of a CSS3 keyframes animation with JavaScript? In CSS you can do that with the animation-duration property: animation-duration: 1s; The JavaScript should be raw, i don't want to include jQuery or other JS librarys into my site. 回答1: You can assign css classes in javascript and put your transition/duration/animation in those css classes Or you can assign your css directly in javascript. document.getElementById('your_id').style.animationDuration="1s"; for

问题 I have a CSS3 animation defined (and associated @keyframes ): animation: myAnimation 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; Even though you can't see it, is this animation running (and consuming resource) if the parent element has visibility: hidden ? 回答1: Yes, the animations continue to run even if the parent container has visibility:hidden because the element is still there and it is only hidden. In the below snippet you can verify the contents of .output div to see that it

问题 I have a very strange issue. I'm loading articles from JSON in jQuery and as they load, I'd like to add a class of 'animate' to each dynamic element. $.each(jsonArticles, function (i, article) { var $articleHTML = $( '<article class="article">' + '<a href="' + jsonObject.filmLink + article.reviewLink + '"><img src="' + jsonObject.imagePath + article.reviewImage + '" alt=""></a>' + '<h1><a href="' + jsonObject.filmLink + article.reviewLink + '">' + article.reviewTitle + '</a></h1>' + '<p><a

问题 I'm facing a problem, I have a div with an absolute position, and I'm trying to rotate it 360 degrees with an endless looping. But if I use the transform: translate (-50%,-50%) to fully center this div, it won't work properly. HTML <div class="randomName"></div> CSS .randomName { background-color: orange; width: 1500px; height: 1500px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: orbita 2s linear infinite; -webkit-animation: orbita 2s linear infinite;

问题 The MDN animation documentation refers to animation type being discrete . What does this mean? 回答1: Discrete animations proceed from one keyframe to the next without any interpolation. Think of it the way you normally would think of an animation - one image to the next. Interpolation is inbetweening - filling in space between the main images (in the case of computer graphics these are found from formulas). In traditional hand-drawn animation, the main artist would produce the keyframes, and