React CSSTransitionGroup list animation weird behaviour
css3,reactjs,css-animations,react-jsx
You're experiencing this problem because you're using index as your key: let nodes = items.map((item, index) => { let idx = index return (<Item key={index} value={item} index={index} _delete={this._onDelete}/>) }) React uses the key property during virtual DOM diffing to figure out which element was removed, but indexes will never serve...
Stop CSS rotate animation smoothly on unknown keyframe
javascript,css,css3,jquery-animate,css-animations
I would use manual animation here. The browser is in charge of its CSS animation and it will be challenging to intervene with that with perfectly synced position and speed. As the animation is not very complex we can simply set up our own matrix, or use the helper methods,...
jquery rotate max count
jquery,css,css-animations,rotateanimation,jquery-rotate
You can use jQuery's built in .stop( [clearQueue ] [, jumpToEnd ] ) method to stop the animation before you start a new one using the rotate plugin. Setting clearQueue to true will prevent any extra animations from being run after stopping the current one, and setting jumpToEnd will prevent...
Forcing a CSS animation to complete
css,animation,css-animations,timing
I'm not sure how you can do this without JavaScript. You can toggle classes instead of using hover selector and use transitionend to detect when the animation has completed to toggle the hover classes. https://jsfiddle.net/w5b1hm0w/2/...
CSS Animation Error
html,css,css3,animation,css-animations
You should write your transforms into a single statement: @keyframes swing { 75% { transform: rotate(700deg) translate(0, 1500px); } 100% { transform: rotate(700deg) translate(0, 1500px); } } UPDATED If you want rotate when falling, you should use two animations separately: @keyframes translate { 10% { transform: translate(0, 0); } 15%...
CSS sprite animation timing issues
css,css-animations,css-sprites
Your math is off..I think. The image is, apparently, 2844 px tall...so the number of steps should be the height divided by the element height 2844 / 36 = 79 .spinner { width: 36px; height: 36px; background: url('http://i.imgur.com/CYiaWsF.png') top center; -webkit-animation: play 1s steps(79) infinite; animation: play 1s steps(79) infinite;...
What's the pattern for calling requestAnimationFrame multiple times per frame?
javascript,javascript-events,css-animations,requestanimationframe
What's the best way to cancel the first two calls Store the token returned by the latest requestAnimationFrame, and when you schedule a new handler call cancelAnimationFrame with it. or turn them into no-ops? You can just as easily use boolean flags that you check every time. Or maybe...
How to make smooth media-query transition back and forth?
media-queries,transition,css-animations
Ok finally made it work after playing around and researching a bit. Once I learned to control animation with delays on both sides it became easier. .wrapper { width: 500px; background-color: #0C6; } .nav { background-color: #69C; } .logo { height: 0px; background-color: #FC3; visibility: hidden; opacity: 0; -webkit-transition: visibility...
Pure CSS animation visibility with delay
You are correct in thinking that display is not animatable. It won't work, and you shouldn't bother including it in keyframe animations. visibility is technically animatable, but in a round about way. You need to hold the property for as long as needed, then snap to the new value. visibility...
How can I use CSS, Javascript, or a Cookie to disable animation reply on back button?
javascript,css,cookies,css-animations
At the bottom of your homepage (just before </body>) add: <script> function startAnimation() { var cookie = document.cookie; if (cookie.indexOf('preventAnimation=true') === -1) { document.getElementById('elementToBeAnimated').setAttribute('class','animate'); } } function setPreventAnimationCookie() { document.cookie = 'preventAnimation=true; path=/'; } window.onload = startAnimation(); window.onbeforeunload = setPreventAnimationCookie(); </script> The first function checks document.cookie to see if it...
How to initialise jquery Keyframes
jquery,css3,css-animations,keyframe
In your example "transform" is spelt incorrectly. After fixing that, it worked for me in chrome. You can also follow the spec a little bit closer by changing... transform:translate3D(0px, 0px, 0px); to transform:translate3D(0, 0, 0); ...
Trying to infinitely loop a complex css animation (border runs around edge of a circle)
Figured it out. Used two clipped divs overlaying the div to be revealed. In the clipped divs are a single div with rounded corners. Each is associated with a looping animation. One is delayed to simulate a single seamless effect. Not a perfect solution since the blue is peeking a...
Does anyone know how to create this 3d flip animation via CSS?
http://www.w3schools.com/cssref/css3_pr_perspective.asp Try looking into perspective property in css.this will do the thing whcih you want to do. <div id="div1"> <div id="div2"> </div> </div> #div1 { position: relative; height: 150px; width: 150px; margin: 50px; padding: 10px; border: 1px solid black; -webkit-perspective: 0px; /* Chrome, Safari, Opera */ perspective: 300px; } #div2...
Cross fading animation (key frame image duration)
html,css,css-animations,keyframe
Updated Version Check this output result https://jsfiddle.net/5ac3cLtv/5/ I did following things to get the desired result. 1) Set position:absolute; for images. 2) Increased Animation time to 15s. 3) Included animation-timing-function:ease-in-out;, it will bring smoothness to the start and end of our animation. 4) Gave animation-delay:8s to #index_banner img:nth-child(odd). 5) Changed...
Animating CSS columns and SVG
html,css,css3,svg,css-animations
Problem 1: too much space around SVG This is because your viewBox is absolutely ginormous. Your garbage can image is roughly 417x522, but your viewBox says it is 3000x3000. So the first step is to fix that: <svg viewBox="135 994 417 522" ... Problem 2: animation not working in the...
Floating ghost CSS animation
It isn't all that difficult with JQuery. Here's a function that can be called regularly with a setInterval() timer: var haunt=function(){ var dy; ghost_ticks++; ghost_clock++; if (ghost_clock>30) ghost_clock=30; dy = Math.sin(Math.abs(ghost_clock) * Math.PI/60); /* sine wave */ dy *= -40 + 6*Math.cos(ghost_ticks/5); /* ramp */ $("#ghost").css("transform","translate(0,"+dy+"px)"); if (ghost_clock==0) { clearInterval(ghost_timer);...
How to animate an image as it grows from the width of a container to the full viewport width?
You don't need @keyframes for that, only with transition is enough. http://jsfiddle.net/xnmojeyn/ document.getElementById("expandableImage").addEventListener("click", zoom); function zoom() { if (this.className.indexOf("fullsize") > -1) { this.className = this.className.replace(" fullsize", ""); this.className = this.className + " smallsize"; } else { this.className = this.className.replace(" smallsize", ""); this.className = this.className + " fullsize"; } } body,...
How can I fade out/in a view based on a SELECT change?
javascript,angularjs,css-animations
Here is a hacky way of getting your desired effect using transition delays and an ng-repeat. It is somewhat imperfect because there is a delay when going from no selection to selection equal to the transition delay: angular.module("MyApp", ['ngAnimate']) .controller("MyController", function() { this.things = [{ name: "Thing One", data: "This...
Holo spinner example with images doesn't work while pure CSS does
css,google-chrome,css-animations
Since i assumed both spinners were correct i didn't realize it was missing the webkit-keyframes property. Today i watched once again the css and noticed by chance that the css spinner had it while the image-based spinner didn't. Adding this to the image based spinner css worked @-webkit-keyframes rotate-outer {...
How do I delay the start of some clouds on this webpage?
html,css,web,css-animations,frontend
Check This Fiddle: http://jsfiddle.net/0cmonc5q/ #animated-cloud-background .cloud.cloud-1 { top: 10%; -webkit-animation: animateCloud 10s linear infinite; -moz-animation: animateCloud 10s linear infinite; animation: animateCloud 10s linear infinite; -webkit-transform: scale(0.65); -moz-transform: scale(0.65); transform: scale(0.65); z-index: -5; animation-delay: 2s; -webkit-animation-delay: 2s; } #animated-cloud-background .cloud { position: absolute; top: 0; left: -128px; } The animation delay...
CSS3 animation function for smooth 3D revolution?
css,css3,rotation,css-animations
If you want to move you element in a 3d environement, you can use the perspective property and actual 3d rotation. Right now you are animating on straight lines between positions so simulating a rotation is almost imposible. I built the following example, you will need to tweak the size...
Rotate elements by an increasing amount
Try this: $qty: 40;//number of childs $step: $qty *2 ; @for $i from 0 through $qty - 1 { div:nth-child(#{$i + 1}) { transform: rotate( $step+deg) ; } } also check this...
Why is animation-fill-mode not working for this specific element?
It's because you defined only 0% and 50% in your zoomIn animation. Using 100% instead works. @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(.8, .8, .8); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } http://codepen.io/anon/pen/jPLKRp...
smoothly sliding in a new div from below
javascript,html,css,css-animations
If you want another element affected by your animation don't use translate.. try using margin like so: DEMO .wrapper { margin-bottom:-20px; -webkit-transition: margin 2s ease; position: absolute; } .wrapper.in { margin-bottom:0px; position: relative; } good luck....
How to improve the performance of this CSS animation?
Try changing your animation duration to 1s: .pulse {width: 20px; height: 20px; vertical-align: middle;background-color: #53A653; border-radius: 100%; -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out;} EDIT: I forgot to read the line says how your scrolling became chunky. Try using Firefox (stupid suggestion). If not, it's most likely...
How can I move a div with direction in JavaScript?
javascript,html,css,css-animations
Click somewhere. jsfiddle.net/o9zd5tvp/19/ Or Run snippet below. Rotate only do rotation "in a place". You can move only by changing position (left and top). (each element in HTML is just a block at point x,y) Don't forget to set position: absolute in css to make div floatable. var d =...
Chrome decodes large image every frame
html,css,google-chrome,css-animations
Using a pseudo element and transform still uses a lot of CPU, but it is quite smoother. And it absolutely eliminates the image decodes. I think that Chrome is using a single buffer for a div background. When you change the relative positions of the 2 images in this buffers,...
Change CSS3 Animation keyframes
html,css,css3,css-animations,css-transforms
Invert the operands in translate(x,y), from translate(0,-5) / translate(0,+5) to translate(-5,0) / translate(+5,0). Running demo Or even better, use translateX instead of translate...
Animated text gets hidden after completion of the animation
css,css3,css-animations,keyframe
You need to set the animation-fill-mode as forwards so that the element would hold the state as at the final keyframe of the animation (which is color: #000). Without this setting, the element reverts back to its original state (color: transparent) after the animation is complete. animation: subheadinganimation 17s forwards;...
Why does CSS animation have no duration?
The animation does have a duration. The problem is the animation already finished playing, and changing the class won't play the animation from the beginning unless the animation-name property changes. So one way to solve this would be to create separate animations for the bit-empty and large-bit classes: .timeline-gauge {...
keyframe animation using pseudo selectors
css,css3,animation,css-animations,keyframe
Your animation that you trigger on :hover overrides the transform property of the red circle, hence it looks like the whole animation was reset. One idea to overcome this to use margin instead of transform: translate or just copy the final transform property a second time. Here is one way...
Animation bug, precedence of animation, when animation applied to child and parent
Nothing is wrong about your animation. Just that the configuration of your animation is not good. The problem appear because before the animation trigger. The text will be render within the animating parent. When your text got triggered by animation it will animation on it own. Which mean it will...
Using CSS animations to bump up div's
javascript,jquery,html,css,css-animations
Instead of using absolute positions for the wrapper, it's best to put them in a normal flow, and use CSS3 translate to animate the newly added message. setTimeout( function() { $("#wrapper_l").addClass("in"); }, 1000) .fullconversation { height: 32%; width: 100%; display: block; position: relative; } .global-wrap { width: 100%; position: absolute;...
CSS way of looping a background image with cover or contain sizing
css,css3,responsive-design,css-animations
The problem is that, to make it responsive, you need to set the animated background-position using percentages. But, when you set background-size as cover or contain, in some case the width is adjusted to 100%. In the case, background-position using percentages is useless (won't move it). The only way that...
CSS Animation “slide in from side” not working on Chrome
Add dohide class to slideToView in the html. And add opacity: 0 to the .slideToView class and opacity: 1 to the .slideToView.visible class. Updated the fiddle: https://jsfiddle.net/unbmajwv/4/...
Transition Animation on Position Property
css,css-transitions,css-animations
1) You only need the transition in the basic rule (not again in the :hover rule) 2) you need a value that corresponds to the value you're trying to animate to in your :hover rule, like so: https://jsfiddle.net/svArtist/70yw60b7/ #hoverme { background: rgba(255, 0, 0, 0.7); height:100px; position: absolute; top:50px; /*...
Animate a single word in a sentence with CSS
html,css,animation,css-animations
You can do this in pure CSS by animating the max-width of the individual spans. Here’s a CodePen, and here’s the CSS (prefixes removed for clarity. To get them back just click the little 'View Compiled' button on CodePen) .rw-wrapper{ width: 80%; position: relative; margin: 110px auto 0 auto; font-family:...
Shrink sticky header with logo by adding a class?
html,css,css-animations,sticky
the css is simply .is-sticky{ height: 10px; } .is-sticky .site-logo{ height:8px; } the ".site-logo" will now only get the "height:8px" when it has a parent of any level with class ".is-sticky" edit: Just saw OPs score. Am i misunderstanding the question?...
Revolving nested element around a center
html,css,css3,css-animations,css-transforms
Fixed. http://jsbin.com/vemalo/1/ Your top margins are a little off. Changes here https://www.diffchecker.com/3mdga45r...
Animate removal of list items with css
css,angularjs,css3,animation,css-animations
The idea is to set the height of container and add transition to the height. $scope.styles.height = $scope.messages.length * 20 + 'px'; http://plnkr.co/edit/3dnGeVoQ1DbX55WQtJjk?p=preview...
How to perform Javascript/CSS3 animation starting from unknown value?
javascript,css,css3,css-transitions,css-animations
I figured out why the transition doesn't take place. It seems that browsers will skip the transition when setting animatable properties sequentially. To work around this, we have to force a redraw, as described in http://blog.alexmaccaw.com/css-transitions (scroll down to the "Redraw" section) So, for example, adding: var redraw = $warning[0].offsetHeight;...
CSS3 animation rotate spiral effect?
html,css3,animation,css-animations,css-transforms
This would be one possibility @-webkit-keyframes yellow { from { transform: rotate(0deg) translate(150px) rotate(0deg); } to { transform: rotate(360deg) translate(0px) rotate(-360deg); } } @-webkit-keyframes blue { from { transform: rotate(120deg) translate(150px) rotate(-120deg); } to { transform: rotate(480deg) translate(0px) rotate(-480deg); } } @-webkit-keyframes orange { from { transform: rotate(240deg) translate(150px) rotate(-240deg);...
Flipping image css transformation
jquery,html,css,css3,css-animations
I think this is what you are looking for, i have created square block of 220px(change as per your requirement), which has image you linked in question as background. JSFiddle CSS .flip-container { position:relative; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } .flip-container:hover .flipper { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;...
Css animation In/out
jquery,css,angularjs,css-animations
Add transition to .search-results-closed too: .search-results-closed { transition: all 0.5s ease 0s, visibility 0.5s ease 0s; } FIDDLE: https://jsfiddle.net/lmgonzalves/8y48q/54/...
rotate animation on selected part of the svg that contains paths
Isolate the element or group g that you want to animate and make sure it has an ID (if you name your layers in Illustrator it should export those names out as ID's I believe) Define a keyframe animation (unprefixed for brevity) @keyframes spin { 0% { transform: rotate(0deg); }...
Element disappears after the re-appear animation completes
javascript,jquery,html,css,css-animations
Your problem is because within the webkitAnimationEnd event handler you aren't checking for the state. The below code is an event handler which means every time an animation on the #project-box ends the box is hidden. This happens only the 3rd time because you are attaching the event handler only...
Why do the clouds in this CSS animation move to a new line instead of leaving the page?
html,css,css-animations,web-frontend
Try adding a class to each of your clouds "cloud" <img class="cloud-1" src="images/Cloud.png"> should become <img class="cloud cloud-1" src="images/Cloud.png"> Then add some CSS: #animated-cloud-background .cloud { position: absolute; top: 0; left: 0; } ...
CSS3 Animation should stop at position 75%
I've made couple of changes to your animation, all you need to do is duplicate your 75% animation twice and later use animation-fill-mode property and set it to forwards to halt the animation at the last position. Demo div { width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation-name: example;...
IE11 - Toggling a Class via jQuery.toggleClass() Doesn't Activate the Class in IE11 - It Works in All Other Browsers
jquery,css,css3,css-animations,internet-explorer-11
It's not pretty, but it gets the job done: $(window).ready(function(){ var el = $('h1'); el.on('click',function(){ el.removeClass('bounce animated'); setTimeout(function() { el.toggleClass('bounce animated infinite'); }); }); }); <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 class="bounce animated">Example</h1> It seems like IE does not cooperate when setting the...
Center image in css animation
Try this: .col-4 { float: left; width: 25%; position: relative; overflow: hidden; } .col-4 img.bg { width: 100%; -webkit-transition: 0.5s; transition: 0.5s; } .col-4:hover img.bg { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } .col-4 .logo { position: absolute; width: 50%; top: 25%; left: 25%; -webkit-transition: 0.5s; transition: 0.5s; } .col-4:hover...
css3 animation text repeatly
css,css3,css-animations,keyframe
You can actually use infinite loop for your animation. Just that you need to time your animation at the keyframes instead of using delay. See the fiddle The CSS : .animation_text{ animation:animation1 9s infinite; } .animation_text1 { animation:animation2 9s infinite; } .animation_text2 { animation:animation3 9s infinite; } @keyframes animation1 {...
Debugging React CSS Transitions
I'm not sure about the best way to track down which components are having problems, but there are currently (as of v0.13.2) bugs in ReactTransitionGroup and bugs in browser implementations of the animationend/transitionend events that can cause this to happen on occasion. Take a look at issue #1326 for some...
How to animate a div using css3
jquery,html,css,css3,css-animations
Use a separate animation to hide the blocks @-webkit-keyframes shrinkThis { 0% { height: 100%; width: 100%; } 100% { height: 0; width: 0; } } And you can use a call back to know that the block is hidden and then expand the corresponding block $(".block").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",...
FadeOut/FadeIn animations before/after ngAnimate
css,angularjs,animation,css-animations,ng-animate
I would try adding separate animation for fadeIn/Out and using the css animation delay to trigger one after the other. E.G: /* enter animation */ #form-views.ng-enter { -webkit-animation:slideInRight 2s both ease, fadeIn 1s both ease 2s; -moz-animation:slideInRight 2s both ease, fadeIn 1s both ease 2s; animation:slideInRight 2s both ease, fadeIn...
CSS animations when adding class via PHP [closed]
You've set the ID attribute for your error to errorbox whereas the css is set on #error. And you cant have both styles added to the element at the same time. You need javascript This <div id="errorbox" class="<?php echo("$animate");?>" ><?php echo("$errormsg") ?></div> Should be <div id="error"><?php echo $errormsg; ?></div> then...
How to fade in and fade out text on a timer using css animations
An experiment with just css animations: http://jsfiddle.net/8ejqsywu/6/ There is one animation which moves the text list verticaly, and another which fades in and out the text. The difficulty was to synchronize them! #container{ overflow:hidden; height:48px; } .whoiam{ -webkit-animation: move; position:relative; -webkit-animation-duration: 8s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: step-start; -webkit-animation-delay: 0.5s } h2{...
CSS Animation, working adding class, but not removing the class
As mentioned in comments, animations are not like transitions. Transitions automatically do the reverse effect when the class (or property) is removed whereas animations would not do that by default. To make it happen with animations, we should create a reverse effect of the animation and add it on every...
How can I improve the performance of an animation which changes images of unknown size in a grid?
css,performance,css3,animation,css-animations
It is not a performance problem, it is mode deep than that. the background-image size is a property of the element. When you are making a transition on this, and the 2 images have different sizes, the browser is unable to set both dimensions at the same time, and so...
How do I stop the flickering in this css animation?
I fixed it by changing some specific CSS rules to the following. .second-2 { animation: borderball 1.5s ease-in-out infinite, secondball 1.5s ease-in-out infinite; bottom: 0; opacity: 0; } @keyframes firstball { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes secondball { 0%, 50% {...
Smooth Infinite Scrolling Banner [CSS Only]
css,css3,css-transitions,css-animations,infinite-scroll
Check this out: https://jsfiddle.net/sergdenisov/wb28eeh2/3/. You had unnecessary space between images (cause display: inline, read this article — https://css-tricks.com/fighting-the-space-between-inline-block-elements/). I set: .photobanner, .photobanner2 { font-size: 0 } Then I remove padding-right: 2px and set: .photobanner img, .photobanner2 img { margin-right: 5px; } Really space between 2 img tags was 6px, now...
What is the proper way to animate block resizing after its content changed
you can't animate with display: none; to display: block; but you can animate a height value if you know the new height target value already - you can set the hidden element to 0 with overflow: hidden; so nothing of the hidden element will be seen before the click element...
Hide an element after 5 seconds only CSS does not work on Firefox
css3,css-transitions,css-animations
There are some issues with the code above: The animation is not the same for all browsers: one is animating the visibility (webkit), the other one is animation the overflow (standard). The overflow property is not animatable. Firefox has a history of issues with the visibility property (this is not...
Why isn't the actual time displaying? Jquery/CSS Clock
In your code seemed to lack something, at least in what you call never copied to the initLocalClocks () function is executed. Example: https://jsfiddle.net/obravoo/sj0fg3zv/1/ In the previous answer moment.js mention the script, but that's only for international clocks that use various different schedules that runs on the user's computer where...
append css style to add dynamic transform translate
javascript,jquery,css,css-animations
The jquery .css method will add the styles on the element's style property and this cannot handle :hover events. These should be added dynamicaly in a css stylesheet to work. See here how to add dynamic stylesheet in javascript...
Is there a conflict between setting initial visibility and animating visibility for one element?
Okay, here you go I think this is the effect you want. CSS #one { visibility: visible; -webkit-animation-name: fade-out; animation-name: fade-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #two { visibility: hidden; -webkit-animation: pop-in 2s; -webkit-animation-delay: 4s; -moz-animation: pop-in 2s; -ms-animation: pop-in 2s; -o-animation: pop-in 2s; animation: pop-in...
Pure CSS method of running an animation through on click
html,css,css3,animation,css-animations
Try this out but you need to use jquery to keep the button active , i didn't used jquery therefore hold the click; @-webkit-keyframes ripple { 0% { background-size: 1% 1%; opacity: 0.5; } 70% { background-size: 1000% 1000%; opacity: 0.2; } 100% { opacity: 0; background-size: 1000% 1000%; }...
CSS3 animation background not work on firefox
You can use a :pseudo element to add a background-image and change its opacity demo - https://jsfiddle.net/4x3k7Lxy/4/...
Create an CSS3 animation that starts after X seconds
html,css,css3,animation,css-animations
just change left: 0 to left: -300px in the .hello class
Delayed CSS3 modal window fade in
You can use animation initial value: (this is longhand) animation-delay: 7s I've prepared working example for you. I've also used animation-fill-mode: forwards, so after animation is finished, opacity remains 1 (not equals 0 as before animation started) animation-fill-mode: forwards; Putted altogether (shorthand): animation: myFade 0.5s linear 5s; Where: myFade is...
Prevent CSS “bounce” on :hover
html,css,animation,css-animations
I don't know exactly what you want but I will try to guess it. if you add this to your ccs: #menu-toggle + label span { vertical-align: top; } is it what you want?...
Rotating images on a circular path using CSS/SASS
The usual way to solve this, without need to write different animations, is to use different timing for each one .city {animation-delay: 0s; } .nature {animation-delay: -1.6s; } .abstract {animation-delay: -3.2s; } .sports {animation-delay: -4.8s;} .food {animation-delay: -6.4s;} each delay is the total animation time divided by the number of...
CSS transform-origin + stacked divs
The problem is that the spinMe element has 100% width and zero height due to the absolutely positioned children. If you give spinMe a defined width and height equal to .circle it works correctly. .circle { height: 250px; width: 250px; border-radius: 50%; border: 50px solid white; margin: auto; } body...
Why is my CSS animation breaking my overflow?
html,css,css3,animation,css-animations
CSS in your scene class position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */ ...
Animation transitions behave differently for ng-hide-remove and ng-hide-add
javascript,css,angularjs,css-transitions,css-animations
You got that almost right except for removing the left:0 in the selectors for .animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove.ng-hide-remove-active. .animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove.ng-hide-remove-active { -moz-transition: all ease 0.5s; transition: all ease 0.5s; } Updated Fiddle: https://jsfiddle.net/vsj62g5r/...
CSS animation NOT executing in Mozilla using mozAnimationName
It doesn't work because Firefox no longer requires the vendor prefixes in more recent versions (starting from Firefox 16), so just drop those: http://jsfiddle.net/nsca73oo/2/ <style> @keyframes shake { 0% { transform: scale(0); opacity:0; } 25% { transform: scale(1.3); opacity: 1; } 50% { transform: scale(0.7); opacity: 1; } 75% {...
CSS3 animate margins
html,css,css3,animation,css-animations
You don't need keyframes for this: http://jsfiddle.net/BramVanroy/ybh0thp9/7/ transition: margin 700ms; You need to add the transition property to the base element that you wish to animate. You also mentioned that you wanted opacity change, but I don't see how that's possible considering you only have a single element without children....
Smooth CSS animation in reverse
javascript,html,css,css-animations
Since you're just animating a single property from 0% to 100%, I would simply recommend using transition which will automatically animate a property when it changes its value. That way, you simply need to add/remove a single CSS class that sets a new value and the change will animate as...
keyframes delay between iterations
Unfortunatly there is no property to specify delay between iterations in infinite keyframe animations. The animation-delay only specifies the time before the animation is fired the first time. But You may achieve a delay between iterations by modifying the keyframe animation and including the "static" time in the keyframe animation...
Animate CSS Gradient in Bootstrap nav
css,css3,twitter-bootstrap,css-transitions,css-animations
The reason linear-gradient fails where a solid color works is because linear-gradient actually creates an image. The longhand property it corresponds to is background-image, not background-color. A background-image is not transitional, however using positioning and a pseudo-element, we can use the opacity property to emulate it. Here is a simple...
Fullscreen CSS3 “Cube” Transition
css3,css-transitions,css-animations,css-transforms
Well, the calculus that you are asking is quite hard. The good news is that you don't really need to do it. Any object placed at 0 in the z direction won't be scaled by the perspective. So, the trick is to place the front face of the cube at...
CSS Transition Ease not working
Unfortunately, if you toggle the display property, your animation won't work. If you need to hide the element, do so by setting aother property, like visibility. Just removing the display from the checked state solves the problem. #menu-toggle + label span a { display: block; /* Just for styling */...
css animation doesn't work with new dom-element
Update You can trigger a custom animation. forwards is the animation-fill-mode, which defines how it has to look once the animation is finished. animation: heightAnimate 1s forwards; Here is the animation. @keyframes heightAnimate { from {height: 0px;} to {height: 50px;} } test it here: http://jsbin.com/tobulavobi/1/edit Old You could add a...
3D rotating animated panel that shows up after click on a menu link
jquery,html5,css3,css-animations,css-transforms
On the webpage 3D Rotating Navigation everything is explained (just scroll down a bit). /* enable a 3D-space for children elements */ perspective: 1000px; transform: translateY(-100%); And some docs about the perspective css attribute http://www.w3schools.com/cssref/css3_pr_perspective.asp So basicly 1) Catch the click 2) Add a class like div-3d-rotate or something to...
How to change CSS background-position for the X axis only? [duplicate]
css,css3,css-animations,background-position
Use background-position-x: @keyframes wave{ from{ background-position-x: 80%; }to{ background-position-x: 160%; } } ...
Circle width animation
css,css3,css-animations,css-shapes
You just need to change the border-radius value to any other unit than percentage (all units listed here). For an explanation of how this works and why you need to use these units for the desired output, see Border-radius in percentage (%) vs pixels (px). Example with px : .logo...
How to create a single running text using extjs4.2?
javascript,animation,css-animations,extjs4.2,marquee
Based on your code, change the lbl as the following. // use backslash var lbl = '<div id=\'info\'><marquee scrollamount=\'4\' onmouseout=\"this.setAttribute(\'scrollamount\', 4, 0);\" onmouseover=\"this.setAttribute(\'scrollamount\', 0, 0);\"><font size=\'5\' color=\'red\'><strong>{title} : {item}</strong></font></marquee></div>'; ...
Rotate multiple SVG layers in different directions using just CSS Hover
html,css,svg,css-animations,markup
You need to specify the transform-origin .services-one { width: 100px; height: 100px; } .services-one #lg_ring, .services-one #sm_ring, .services-one #md_ring { -webkit-transition-duration:0.8s; -moz-transition-duration:0.8s; -o-transition-duration:0.8s; transition-duration:0.8s; -webkit-transition-property:-webkit-transform; -moz-transition-property:-moz-transform; -o-transition-property:-o-transform; transition-property:transform; overflow:hidden; transform-origin:center center; /* here */ } .services-one:hover #lg_ring,...
CSS :hover issue
html,css,css-animations,pseudo-class,keyframe
Links cannot have multiple pseudo-classes / states so a:visited:hover { } is not possible. I suspect what you are after is a transition not an animation....
Smooth mouse-out animation
css,css3,css-transitions,css-animations
You should use transitions for this. They will allow you to keep the transition smooth when the mouse moves out of the element. Example : .dn-diamond { display: inline-block; width: 100px; height: 100px; background: #000; transform: rotateY(0deg) rotateZ(-45deg); transition: transform 3s linear; margin: 50px; overflow: hidden; } .dn-diamond:hover { transform:...
CSS3 animations with keyframes
html,css,css3,notepad++,css-animations
I added the other vendor prefixes, but other than that your code should work properly, as demonstrated below: #change { width: 100px; height: 100px; border: 2px solid black; -webkit-animation: changeColor 8s infinite; -moz-animation: changeColor 8s infinite; animation: changeColor 8s infinite; } @-webkit-keyframes changeColor { 0% {background-color: blue;} 20% {background-color: yellow;}...
Adding css class on $routeChangeStart doesn't trigger animation (unless in setTimeout)
javascript,angularjs,settimeout,css-animations,ngroute
First thought, you should be using $timeout to stay in an angular digest cycle vs. setTimeout(). The timeout is probably necessary because it gets executed before the DOM has rendered, meaning your angular.element(..) calls return []. You'll have to listen for an event that gets called after the DOM has...
Clip child to parent element with border-radius
css,overflow,css-animations,rounded-corners,clip
When you add a css 3d transform to the child, you kinda move it to the separate GPU layer. You can move parent element to GPU layer instead adding null-transform hack transform: translateZ(0) to .item. Or you can replace translate with translateY (In this case child is clipped only when...
How to add and remove a class from a single element with one click…
javascript,jquery,css,css3,css-animations
CSS alone doesn't provide a mechanism to act on a keyframe animation/transition end, however it does fire a javascript-detectible event, as explained here. Your repeatable puff animation will look like this : $('a.puff').each(function() { $(this).attr('data-puff', $(this).text()); }).on('click', function() { var $a = $(this).addClass('active').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() { $a.removeClass('active'); });...