How to Programming with Css-animations

css3,reactjs,css-animations,react-jsx

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...

React CSSTransitionGroup list animation weird behaviour

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...

Rotating images on a circular path using CSS/SASS

css,css3,sass,css-animations

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...

Why isn't the actual time displaying? Jquery/CSS Clock

jquery,css-animations,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...

CSS Animation “slide in from side” not working on Chrome

css,css3,animation,css-animations,keyframe

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/...

keyframe animation using pseudo selectors

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...

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...

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'); });...

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 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 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,...

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,...

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...

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...

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 {...

keyframes delay between iterations

css,css3,responsive-design,css-animations

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...

CSS way of looping a background image with cover or contain sizing

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...

How to improve the performance of this CSS animation?

css,html5,css-animations

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...

Why is my CSS animation breaking my overflow?

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 */ ...

Create an CSS3 animation that starts after X seconds

javascript,css,css-animations

just change left: 0 to left: -300px in the .hello class

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% {...

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...

CSS Transition Ease not working

html,css,css3,css-animations

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 */...

AngularJS/ng-animate - Cross-fade animation with dynamic content

angularjs,css-animations,fade,ng-animate

I was able to solve my problem by applying a position: absolute on the element that's ng-leaving, but keeping position: relative on the element coming in. It's not perfect, as the container height doesn't transition nicely with it, but it's a pretty clean solution aside from that: /* Added this...

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);...

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%; } } ...

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...

Delayed CSS3 modal window fade in

css3,css-animations

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...

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...

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...

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/...

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",...

How do I stop the flickering in this css animation?

html,css,css3,css-animations

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% {...

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,...

CSS3 Animation should stop at position 75%

css3,css-animations

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;...

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 {...

Is there a conflict between setting initial visibility and animating visibility for one element?

html,css,css-animations

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,css-animations,sticky

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%; }...

Shrink sticky header with logo by adding a class?

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?...

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 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...

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?...

Does anyone know how to create this 3d flip animation via CSS?

css,angularjs,css3,animation,css-animations

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...

Animate removal of list items with css

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...

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...

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...

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,...

Pure CSS animation visibility with delay

css,css3,jquery-animate,css-animations

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...

CSS transform-origin + stacked divs

html,css,css3,css-animations

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...

how to make animated 404 gears?

You can start with this basic CSS animation I made here. You can add animation-timing-functions such as ease, ease-out or a custom cubic-bezier function to achieve the desired result. Below, I have used the timing-function ease-out. .gear, .gear2{ height: 100px; width: 100px; background: transparent; box-shadow: inset 0 0 0px 35px...

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...

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...

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...

Animation bug, precedence of animation, when animation applied to child and parent

javascript,html,css,css-animations

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...

smoothly sliding in a new div from below

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....

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...

Rotate elements by an increasing amount

css,css3,sass,css-animations

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...

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;}...

CSS animations when adding class via PHP [closed]

php,html,css,css-animations

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...

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;...

Why is animation-fill-mode not working for this specific element?

css,animation,css-animations

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...

Debugging React CSS Transitions

css,reactjs,css-animations

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...

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; /*...

Floating ghost CSS animation

css,svg,css-animations

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);...

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 {...

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:...

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...

How to fade in and fade out text on a timer using css animations

css3,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{...

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...

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/...

CSS3 animate margins

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....

CSS Animation Error

javascript,jquery,html,css,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%...

Element disappears after the re-appear animation completes

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...

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 =...

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); ...

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/...

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;...

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...

css animation doesn't work with new dom-element

javascript,dom,css-animations

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...

rotate animation on selected part of the svg that contains paths

css,css3,svg,css-animations

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); }...

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:...

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;...

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...

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....

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...

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...

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; } ...

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>'; ...

CSS Animation, working adding class, but not removing the class