css-animations

问题 I have created some custom styles for input[type="range"] elements. I have created the following animation @-webkit-keyframes balla { from {transform:rotate(0);} to {transform: rotate(360deg);} } which I apply to: input[type="range"].twirl::-webkit-slider-thumb{ -webkit-animation:balla 5s infinite; background: url(sliders/1.png)no-repeat center; height: 50px; width: 50px; } My problem is that if I apply the same animation to any other element in the page it will work but not for my slider.

问题 I am trying to create an effect where smoke comes out of a vessel Like this example where smoke comes out of a coffee cup but I am not able to do it. Here's a jsfiddle showing my attempt: SVG code is: <?xml version="1.0" encoding="UTF-8"?> <svg width="150px" height="127px" viewBox="0 0 150 127" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <g id="Page-1" stroke="none"

问题 The problem I am running into occurs when trying to animate a web font. Specifically, if the HTML element has a class that defines the font-family and other needed CSS attributes on the :before element as opposed to the element itself, the pseudo content will not get animated. Here is some sample CSS: @font-face { font-family: 'FontAwesome'; src: /** src urls here... **/ } .fa-before:before, .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text

问题 I have transitions for width and height assigned on several elements on my page, including the top navigation bar and the <main> element. As the user resizes the page, the elements animate to change their width/height etc. This works fine except when navigating to a new page. As the page loads, the elements animate from their maximum assigned width to their standard width. This is not animating from max-width to width but rather something like the following: nav { height: 25px; transition:

问题 Here is a pen for what I have so far. I've been using CSS3 however I'm open to using other methods if it will work better: .userAttributes > .attributeGroup > .favoriteArtistsAttr { max-width: 74%; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { text-indent: 0; } 100% { text-indent: -100%; } } I'd like the marquee to begin repeating itself the moment that as the end of the p has slid into frame. I also need the marque to stop with a mousover and be scrollable (this part

问题 I am trying to implement something like this body { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #8ce2ea; flex-direction: column; } .reveal-text, .reveal-text::after { -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 800ms; animation-duration: 800ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function:

问题 I'm just started to web programming, cuz many cooooool pages on awwwards.com - definitely caught my mind. anyway, the first page what i aim for make is the pinterest (www.pinterest.com); slowly moving background with blur effect, floating modal and bottom fixed footer. with some kinda O'Reilly books, the blur, modal and footer are no more problem. but i couldn't made the background even with them yet. so, how can i make horizontally infinite flowing background with only CSS ??? (without JS)

问题 I am trying to animate with CSS the a line through on a bit of text, but it's not actually animating, just going from hidden to displayed. Can anyone advise if what I'm trying is actually possible? If not, is there another way to achieve this? HTML: <div> The text in the span <span class="strike">is what I want to strike out</span>. </div> CSS: @keyframes strike{ from{text-decoration: none;} to{text-decoration: line-through;} } .strike{ -webkit-animation-name: strike; /* Chrome, Safari, Opera

问题 Can anyone tell me how I can get Compass to add the vendor prefixes to CSS3 animation selectors when it compiles? My config file looks like this. http_path = "/" css_dir = "/" sass_dir = "/" images_dir = "img" javascripts_dir = "js" output_style = :expanded relative_assets = true line_comments = false I've tried adding Compass::BrowserSupport.add_support("animation", "webkit", "moz", "ms") to it, but it doesn't work. Edit In response to cimmanon's comment, I wanted to avoid having to repeat

问题 I have recently come across some odd behaviour with Safari in regards to CSS animations and a failure to update an elements position when the DOM is manipulated. I have taken some GIFs that illustrate this: In Chrome (http://recordit.co/cCim1IwyMc), when animation-delay is updated in the DOM, the browser will update the element's animation position as you would expect. In Safari (http://recordit.co/3DRmEdo0FC), when animation-delay is updated in the DOM, the browser fails to update the