css-animations | 易学教程

Passing parameters to css animation

阅读更多关于 Passing parameters to css animation

p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } For the animation CSS code above, I'm wondering whether there's any way to pass the values of margin-left and width as parameter from Javascript. Use CSS variables and you can easily do this: document.querySelector('.p2').style.setProperty('--m','100%'); document.querySelector('.p2').style.setProperty('--w','300%'); .p1,.p2 { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: var(--m, 0%); width: var

Issue while using transitions + opacity change + overflow hidden

阅读更多关于 Issue while using transitions + opacity change + overflow hidden

If you see the code sample I have shared, you can see the overlay going outside the box. I traced the issue down to the transition attribute. I want to remove the content outside of the div. Overflow isn't working as it is supposed to. (removing transition works, but I would like to keep it if possible) Any help is appreciated Codepen Link CODE var timer = setInterval(function() { document.querySelector(".qs-timer-overlay").style.opacity = (document.querySelector(".qs-timer-overlay").style.opacity * 1) + 0.1; if (document.querySelector(".qs-timer-overlay").style.opacity * 1 == 1) {

Trigger CSS Animations in JavaScript

阅读更多关于 Trigger CSS Animations in JavaScript

I don't know how to use JQuery, so I need a method which could trigger an animation using JavaScript only. I need to call/trigger CSS Animation when the user scrolls the page. Please help me out of this problem. <html> <head> <style> * { margin:0px; } #logo { position:fixed; top:200px; height:200px; width:1000px; left:5%; z-index:4; opacity:0.8; } #earthlogo { position: fixed; top:200px; height:120px; align-self: center; left:5%; margin-left: 870px; margin-top: 60px; z-index:4; opacity: 0.9; } @keyframes anim { 50% { filter:blur(10px); transform: rotate(-15deg); box-shadow:0px 0px 10px 3px; }

Sass Keyframes animation mixin generating invalid CSS

阅读更多关于 Sass Keyframes animation mixin generating invalid CSS

问题 I have the following keyframes mixin, but it seems to be generated invalid CSS: @mixin keyframes($animationName) { @-webkit-keyframes $animationName { @content; } @-moz-keyframes $animationName { @content; } @-o-keyframes $animationName { @content; } @keyframes $animationName { @content; } } @include keyframes(icon-one) { 0% { opacity: 1; } 33% { opacity: 0; } 66% { opacity: 0; } 100% { opacity: 0; } } Here's the output: @-webkit-keyframes $animationName { 0% { opacity: 1; } 33% { opacity: 0;

css animation on “content:” doesn't work on Safari and Firefox

阅读更多关于 css animation on “content:” doesn't work on Safari and Firefox

问题 I have an animation set on :before that works fine on Chrome but it doesn't work on Safari (IOS9 iPhone or 9 - El Capitan) neither on Firefox. .hey { color: white; } .hey:before { content: 'Hey \a there'; white-space: pre; position: absolute; color: red; -moz-animation: heyThere 2250ms steps(11); /* for firefox */ -webkit-animation: heyThere 2250ms steps(11); /* for safari, chrome & opera */ } @keyframes heyThere { 0% {content: "";} 1% {content: "";} 75% {content: "";} 77% {content: "H";} 80%

Filling water animation

阅读更多关于 Filling water animation

I am trying to get a wipe up animation to make a circle look like it's filling with water . I've run into two errors, and haven't been able to even tackle the 3rd one: It fills up the wrong way It resets to empty (black) after it has filled * For now, I am using the <img> tags, but I would like to move this effect to body { background-image: } and need some direction on how to do this. What I have tried so far: #banner { width: 300px; height: 300px; position: relative; } #banner div { position: absolute; } #banner div:nth-child(2) { -webkit-animation: wipe 6s; -webkit-animation-delay: 0s;

CSS3 animation not working in IE9

阅读更多关于 CSS3 animation not working in IE9

问题 CSS3 animations are not working in IE9. Here is the jfiddle link. Is it possible to make them working on IE or i am making some silly mistake? Here is the code which is not working: @-ms-keyframes rotating { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); } } #rotateMe{ -ms-animation: rotating 5s linear infinite; } As IE doent support this functionality i have created the fallback using jquery rotate plugin here is my fallback function for IE: $(function() { if (!$

Repeat animation every 3 seconds

阅读更多关于 Repeat animation every 3 seconds

I am using WOW.js and animate.css, right now I am running my CSS to Infinite. I would like know how can I make my class run for 3 seconds stop and start again to infinite? My html: <img src="images/fork.png" class="fork wow rubberBand" > My CSS class: .fork { position: absolute; top: 38%; left: 81%; max-width: 110px; -webkit-animation-iteration-count: infinite ; -webkit-animation-delay: 5s; } The solution can be in JS or CSS3. With pure CSS3 animations, one way to add a delay between every single iteration of the animation would be to modify the keyframes setting such that they produce the

How to prevent css3 animation reset when finished? [duplicate]

阅读更多关于 How to prevent css3 animation reset when finished? [duplicate]

问题 This question already has an answer here: Stopping a CSS3 Animation on last frame 8 answers I write a css3 animation and it is only performed once. The animation works well, but it will reset when the animation finished. How can I avoid this, I want to keep the result instead of reset it. $(function() { $("#fdiv").delay(1000).addClass("go"); }); #fdiv { width: 10px; height: 10px; position: absolute; margin-left: -5px; margin-top: -5px; left: 50%; top: 50%; background-color: red; } .go {

Combination of animation and transition not working properly

阅读更多关于 Combination of animation and transition not working properly

I have been trying to put some basic CSS3 animation. The objective is to toggle a class on the click event of a button and animate a div based on the added class. The code works perfectly for the first iteration of toggle in Firefox but for other browsers like Chrome and for the next iteration in Firefox the transformation is toggled in a blink of an eye. Please help me to figure out what's going wrong. Snippet: $('button').click(function() { $('div').toggleClass('clicked'); }); div { background-color: #ccc; height: 100px; width: 100px; transition-property: top, left; transition-duration: 1s;