css-animations

问题 tl;dr: I would like to create an actual 3d sphere with CSS - not just an illusion Note: some of the snippet examples are not responsive. Please use full screen. With pure CSS you can create and animate a 3d cube like so: #cube-wrapper { position: absolute; left: 50%; top: 50%; perspective: 1500px; } .cube { position: relative; transform-style: preserve-3d; animation-name: rotate; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes

问题 What is the best way to have an object scale and then perform a bounce animation at that scale factor before going back to the original scale factor. I realize I could do something like scaling it to 2.2, then 1.8, then 2.0, but I'm looking for a way where you just have to perform the bounce animation on the scale factor because my scale factor will change. Here is my example. Basically I want to combine the two to work like I said but as you can see the bounce animation performs based off

问题 I built a css animation and part of it is changing the border color of a div. I'm using from and to values. The border should blink white and blue but instead of white I get a light blue . I built a minimal snippet to demonstrate this. Any idea what I'm doing wrong? .switch { width: 100px; height: 100px; border: 5px solid white; -webkit-animation: switch-animation 2s steps(2, start) infinite; animation: switch-animation 2s steps(2, start) infinite; } @keyframes switch-animation { from {

问题 Here is the fiddle and below is the CSS code (the HTML is just an SVG ellipse). It works in Chrome, Firefox and Opera, but doesn't work in IE and Edge. What to do to see the animation in IE and Edge? #my-circle { stroke: blue; stroke-dasharray: 1100; stroke-dashoffset: 500; -moz-animation: draw-first-shape 1s forwards 3; -webkit-animation: draw-first-shape 1s forwards 3; animation: draw-first-shape 1s forwards 3; } @-moz-keyframes draw-first-shape { from { stroke-dashoffset: 1100; } to {

问题 All the browsers (chrome, ie, firefox, safari) on windows show the animation as they should. When I have tried it on my iphone, the animation would not work. Any ideas why? Here is my CSS: #rotatingDiv { position: relative; z-index: 0; display: block; margin: auto; height: 30px; width: 30px; -webkit-animation: rotation .7s infinite linear; -moz-animation: rotation .7s infinite linear; -o-animation: rotation .7s infinite linear; animation: rotation .7s infinite linear; border-left: 8px solid

问题 I did this: http://codepen.io/yayoni/pen/pgXoWY And I want to reverse the animation when I click on the small button but what I did doesnt work and I don't understand why. function anim() { var div = document.getElementById('fab'); div.className = "anim"; } function animrev() { var div = document.getElementById('fab'); div.className = "animrev"; } html, body { height: 100%; width: 100%; } #content { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } #fab

问题 Im trying to use this character ֍ in place of a loading spinner. Here's what I've got so far: .spinner::after { animation: rotating 2s linear infinite; content: "֍"; font-size: 60px; display: inline-block; font-weight: normal; transform-origin: 50% 50%; } @keyframes rotating { 0% { transform: rotate(0deg) scale(1); color: rgba(0, 0, 0, .5); } 50% { transform: rotate(180deg) scale(.8); color: rgba(0, 0, 0, .85); } 100% { transform: rotate(360deg); color: rgba(0, 0, 0, .5); } } <i class=

问题 I was trying to make a gradual fadein using normal CSS and no jquery on a list so it can fade in one-by-one. However, I only know how to do it in a limited amount of list. How do I loop the css so no matter how much list I have it still works. Here is what I have done: .ladder { opacity: 0; -webkit-animation: fadeIn 0.9s 1; animation: fadeIn 0.9s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .ladder:nth-child(5n+1) { -webkit-animation-delay: 0.2s; animation-delay:

问题 I am working on the below: Fiddle Code Here is HTML: <div id="animation"> <ul> <li>this is</li> <li>CSS3 looped</li> <li>animation</li> </ul> </div> This is the CSS: #animation { height: 100%; width: 100%; } #animation ul { position: relative; text-align: center; width: 100%; } #animation li { position: absolute; left:0; top:0; width: 100%; opacity: 0; padding: 10px; } #animation li:nth-of-type(1) { -webkit-animation: fadein 6s ease-in-out -4s infinite alternate; -moz-animation: fadein 6s

问题 Press "Run code snippet" below to see the animated loading spinner that I want to save. I want to replace all green colors with transparency. Also, I'd like the animation to loop perfectly. I tried recording a screen capture video using OBS and then uploading to https://ezgif.com/video-to-gif and using the "Replace color with transparency" feature, but it didn't remove any green color at all. Also, if exporting canvas animations is easier than capturing CSS animations, I'd accept an answer