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...
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);...
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,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; /*...
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...
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...
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...
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...
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 {...
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 {...
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:...
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,...
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);...
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,...
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 =...
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...
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,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...
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/...
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...
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...
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;}...
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...
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...
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....
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...
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...
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....
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%...
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...
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?...
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...
add this transform-origin: top left to .green .half.right.rotate .green .half.right.rotate { transform: rotateY(180deg); transform-origin: top left } ...
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,...
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...
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/...
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...
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,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;...
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...
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;...
html,css,css3,animation,css-animations
just change left: 0 to left: -300px in the .hello class
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); }...
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...
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%; }...
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...
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;...
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,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...
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...
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...
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...
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....
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?...
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% {...
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/...
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 */...
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...
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...
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 {...
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 */ ...
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...
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...
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...
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...
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...
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,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...
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...
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...
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...
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;...
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...
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...
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...
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...
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:...
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...
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...
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...
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,...
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; } ...
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;...
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...
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...
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% {...
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/...
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...
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...
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",...
You can use a :pseudo element to add a background-image and change its opacity demo - https://jsfiddle.net/4x3k7Lxy/4/...
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...
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'); });...
css,css3,css-animations,background-position
Use background-position-x: @keyframes wave{ from{ background-position-x: 80%; }to{ background-position-x: 160%; } } ...
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>'; ...
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); ...