css-animations

问题 In my project, when the homepage is opened, it should run a CSS animation so that the cube's faces open. After the animation is complete the faces should be like in the picture (I need to have a result like the first opening in the picture). This is my code, .sk-folding-cube { margin: 20px auto; width: 40px; height: 40px; position: relative; } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1);

问题 Using @keyframes (and animation ) to animate a color does not work in Chrome. Demo: https://jsfiddle.net/ed3pypwr/ In Chrome the link stays blue. In Firefox it goes from red to green as expected. On a div it works fine in Chrome as well. Is there any way to solve this? EDIT I know it should be prefixed with -webkit- to ensure maximum compatibility, but this is not the issue here. It does not work anyway. EDIT 2 A solution would be to put the link in a wrapper and use currentColor : https:/

问题 I'm trying to make CSS3 animation like in the slider present in this site. I have tried to use the below CSS: .animate-in{ left: -20%; opacity: 1; top: 0; z-index: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-transition-property: left, -webkit-transform, opacity; -moz-transition-property: left, transform, opacity; -ms-transition-property: left, transform, opacity; -o-transition-property: left,

问题 I have created a compositing layer for a div with the following styles: div { position: absolute; height: 50px; width: 50px; background: #900; top: 100px; left: 200px; will-change: transform; transform: translateZ(0); } I then apply an animation to it using the Web Animation API: document.getElementById("box").animate( [ { transform: 'rotate(0) translate3D(-50%, -50%, 0)' }, { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)' } ], { duration: 500, iterations: Infinity } ); From my

问题 I would like to build a animated spinner with CSS3. It should behave like this : After the last state it should start again like in the first state. I managed to create circles using the technique explained here : stackoverflow question Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either. 回答1: CSS3 spinner This

问题 I have a CSS animation that I want to be applied in 200ms intervals. I've set up the CSS like this: .discrete { position:relative; opacity:1; -webkit-transition: all .5s linear; -moz-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear; } .discrete.out { left:-40px; opacity:0; } I then want to stagger the application of the .discrete.out class in 200ms intervals. I've tried the following: $('.discrete').each(function() { $(this).delay(200).addClass('out'); });

问题 This question already has an answer here : CSS Animated Circles - Stop center content from rotating (1 answer) Closed 3 years ago . 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:

问题 This question already has an answer here : CSS Animated Circles - Stop center content from rotating (1 answer) Closed 3 years ago . 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:

问题 In my website I want to have a header that fades in and out, then in with different text, then out, then back to normal (looped). Here's how I would like it to work: h1 { font-size: 600%; animation-name: head; animation-duration: 4s; animation-iteration-count: infinite; } @keyframes head { 0% {font-size:600%; opacity:1;} 25% {font-size:570%; opacity:0;} 50% {font-size:600%; opacity:1;} 65% {font-size:570%; opacity:0;} 80% {font-size:600%; opacity:1; innerHtml="Changed Text"} 90% {font-size

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 4 years ago . I was going thru some single page website examples and found this: http://alwayscreative.net/. I am totally amazed by the disc in the background that rotates infinitely. i have looked at some examples but none worked that way. Can anyone tell me how was that implemented. Thanks.