css-animations

问题 I want to create a shine loading animation which will appear on multiple elements with different background colors. Currently, I'm using background-image gradient and I'm animating the background-position using vw units, but it's not scalable, my elements will have different lengths. Is there a way I can animate background-image with percentage units? The animation created body { background: black; } header { width: 100%; height: 50px; background-color: rebeccapurple; background-image: linear

问题 I am trying to create an animation where each letter is moved separately, which works fine but when I add infinite it does not have a delay between the loops so the letters are constantly moving one after another. I tried to add animation delay on the base animation but it just slows down the animation speed. @keyframes move { 0% { transform: translateY(0) } 100% { transform: translateY(4vh) } } .anim p { animation: move 0.7s ease-in-out forwards; animation-timing-function: linear; } .anim

问题 I tested with the following answers: Pure CSS rotate animation broken while in infinite loop Stop infinite CSS3 animation and smoothly revert to initial state CSS Image Fade Animation Only Runs First Time, but the animation duration and timeline (for example, from step by step, from start to end) did not work. The three images need to be in the same place at once. I wanted to use https://codepen.io/jay-bee-why/pen/Htejl, but unfortunately I do not want to use jQuery. I am CSS and JavaScript

问题 I've put together a pure css text slideshow using a keyframe animation based on this code: https://codepen.io/johnlouie04/pen/BqyGb I've made it so that when you hover the transition it pauses. This works perfectly in Google Chrome and Safari, but on Firefox whenever you hover the slider the animation replays really quickly before pausing. This occurs even without the animation-play-state:paused line. There's also another hover selector in the slider which also seems to cause the animation to

问题 Playing with web technologies, I developed a dice using just HTML and CSS (without JavaScript). It's a simple system: a series of radio buttons and labels that simulate the dice by changing their positioning (with z-index ) so every time that you click on the dice, there's a "random" number. This is a minimal version of the code: @keyframes changeOrder { from { z-index: 6;} to { z-index: 1; } } @-webkit-keyframes changeOrder { from { z-index: 6; } to { z-index: 1; } } label { display: block;

问题 The .animate() function in jQuery does not allow all CSS3 animatable properties to be animated (for example, background-color ). Is there a nice, standard way to dynamically create, apply, and remove CSS3 animations to elements on the page? I'm currently following the example here but this is clunky and feels wrong. While it works, I would rather a better solution (using a library or something like that). 回答1: Yes, we can dynamically create, apply and remove CSS3 animations to an element in

问题 If I have a CSS keyframe animation like this @keyframes flash-red { 50% { background: #f00; } } #goflash.anm-flash { animation-name: flash-red; animation-duration: .5s; background: rgba(255, 0, 0, 0); } Then I can always trigger the animation like this: var gf = document.querySelector("#goflash"); gf.classList.remove("anm-flash"); setTimeout(function() { gf.classList.add("anm-flash"); }, 50); Is there any way to override the animation-duration/animation-timing-function to be dependent on

问题 I am making a menu that each item has a text like item1, item2 and etc. in hover the background colour changes, text becomes transparent and a background image replaces. I used this code to ease in and out the style. but it only works for background colour and not the image. #nav li:hover { color:transparent !important; text-shadow: none; background-color: rgba(255, 0, 0, .5); -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -o-transition: all 1s ease-in; -ms-transition:

问题 I have text that I want to animate. Not on hover, for example but continually changing slowly from white to red and then back to white again. Here is my CSS code so far: #countText{ color: #eeeeee; font-family: "League Gothic", Impact, sans-serif; line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0px 0px 6px ; font-size: 210px; } 回答1: Use keyframes and animation property HTML <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad quos autem

问题 I have text that I want to animate. Not on hover, for example but continually changing slowly from white to red and then back to white again. Here is my CSS code so far: #countText{ color: #eeeeee; font-family: "League Gothic", Impact, sans-serif; line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0px 0px 6px ; font-size: 210px; } 回答1: Use keyframes and animation property HTML <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad quos autem