How to Programming with Css-animations

css,reactjs,css-animations

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

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

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

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

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

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

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 animate an image as it grows from the width of a container to the full viewport width?

javascript,html,css,css-animations

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 move a div with direction in JavaScript?

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

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

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

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

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

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

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

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

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

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

Pure CSS animation visibility with delay

html,css,css-animations,pseudo-class,keyframe

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

CSS :hover issue

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

CSS Animation Error

css3,reactjs,css-animations,react-jsx

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

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

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

What is the proper way to animate block resizing after its content changed

html,css,google-chrome,css-animations

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

CSS animation using rotateY to flip half a circle

html,css,css-animations

add this transform-origin: top left to .green .half.right.rotate .green .half.right.rotate { transform: rotateY(180deg); transform-origin: top left } ...

Chrome decodes large image every frame

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

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

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

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

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

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

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

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

Create an CSS3 animation that starts after X seconds

html,css,css3,css-animations,css-transforms

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

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

Revolving nested element around a center

Fixed. http://jsbin.com/vemalo/1/ Your top margins are a little off. Changes here https://www.diffchecker.com/3mdga45r...

Pure CSS method of running an animation through on click

javascript,angularjs,settimeout,css-animations,ngroute

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

Adding css class on $routeChangeStart doesn't trigger animation (unless in setTimeout)

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

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

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

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

Trying to infinitely loop a complex css animation (border runs around edge of a circle)

css,css3,rotation,css-animations

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

CSS3 animation function for smooth 3D revolution?

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

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

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

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

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

jquery,html5,css3,css-animations,css-transforms

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

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

3D rotating animated panel that shows up after click on a menu link

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

Animate.css isn't working when adding/removing classes

jquery,css,syntax,css-animations

It's because you aren't toggling the bounce class. Updated Example $(".run").hover(function(){ $(this).addClass("animated infinite bounce"); }, function(){ $(this).removeClass("animated infinite bounce"); } ); Apparently there are some cross-browser inconsistencies. This fixes it in Chrome. Now it works in all supported browsers. You can avoid JS/jQuery completely and use the following: Example Here...

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

Why is my CSS animation breaking my overflow?

javascript,css,cookies,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 */ ...

How can I use CSS, Javascript, or a Cookie to disable animation reply on back button?

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

Delayed CSS3 modal window fade in

css,css3,css-animations,css-shapes

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

Circle width animation

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

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

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

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

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

How can I improve the performance of an animation which changes images of unknown size in a grid?

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

keyframes delay between iterations

jquery,css,css3,css-animations,internet-explorer-11

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

IE11 - Toggling a Class via jQuery.toggleClass() Doesn't Activate the Class in IE11 - It Works in All Other Browsers

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

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

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

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

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, working adding class, but not removing the class

html,css,animation,css-animations

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

Animate a single word in a sentence with CSS

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

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

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

how to make animated 404 gears?

css,css3,jquery-animate,css-animations

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

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

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%

jquery,css-animations,clock

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

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

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

CSS animation NOT executing in Mozilla using mozAnimationName

javascript,css,css-animations

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

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

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

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

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

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