FAQ Database Discussion Community


CSS3 animation rotate spiral effect?

html,css3,animation,css-animations,css-transforms
I've been searching and experimenting for days to produce this effect, I want a center dot/block and then three smaller blocks starting around the element to begin with, then these 3 outside elements animate rotating around the center until they end being in the center themselves (like a spiral effect...

CSS animation using rotateY to flip half a circle

html,css,css-animations
I'm trying to make an animation with CSS. Check out my fiddle: http://jsfiddle.net/xonuf2k1/1/ It is being flipped by this class: .green .half.right.rotate{ transform:rotateY(180deg); } You will notice, when you run the fiddle that half of the circle folds outward. What I am trying to achieve is to have that circle...

How to initialise jquery Keyframes

jquery,css3,css-animations,keyframe
I'm trying to use jquery Keyframes for dynamically created keyframe animations. I have six icons on my page (could be more) which all need to be animated to random x and y values between the following ranges: x = 1-5 y = 13-20 The animation should allow the icon to...

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

css,css3,css-animations
I just built a small animation and it does exactly as I want it to, except a small problem, I have bounceIn animation on 2 HTML elements, my HTML is below: <div class="test animated bounceInDown"> <span class="animated bounceInDown delay">I am animation</span> </div> My CSS: .test { height: 200px; width: 200px;...

How to activate a CSS animation only when hovering - without javascript

html,css,css3,css-animations
Is there a way to get this CSS code: /** Swing **/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg);...

Why do the clouds in this CSS animation move to a new line instead of leaving the page?

html,css,css-animations,web-frontend
I'm trying to have these clouds move across the web page and out of it, but the clouds keep moving to a new line. Here is the website: http://therealrohanm.me/Falcon-Hacks-Website/ (the clouds take a few seconds to show) Here is the code: https://github.com/Meeshbhoombah/Falcon-Hacks-Website How can I have them not move to...

CSS3 animations with keyframes

html,css,css3,notepad++,css-animations
So I have been trying to solve this problem for over an hour. I use Notepad++ as my code editor, and I have been trying to do a css3 animation, but it won't work. Notepad++ will not recognize the "@" in "@-webkit-keyframes." It remains black while the other text is...

How to improve the performance of this CSS animation?

css,html5,css-animations
I am using Chrome and a pure pulse CSS animation .pulse { width: 20px; height: 20px; vertical-align: middle; background-color: #53A653; border-radius: 100%; -webkit-animation: scaleout 3.0s infinite ease-in-out; animation: scaleout 3.0s infinite ease-in-out; } @-webkit-keyframes scaleout { 0% { -webkit-transform: scale(0.0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } Here...

What's the pattern for calling requestAnimationFrame multiple times per frame?

javascript,javascript-events,css-animations,requestanimationframe
I have a touch handler that may fire multiple times within a given 16ms time period. On each firing, I set a translate on the element based on the touch position, eg: at 2ms, translate 20px at 5ms, translate 40px at 10ms, translate 50px I understand that calls to rAF...

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

css,css3,css-animations
I've got this keyframe @keyframes jump { 25% { transform: translate3d(0, 0px, 0); } 75% { transform: translate3d(0, 10em, 0); } 100% { transform: translate3d(0, 17.5em, 0); } } Then I have this class .close.form_open { animation: jump .5s forwards linear; -webkit-animation: jump .5s forwards linear; } I'm adding the...

Holo spinner example with images doesn't work while pure CSS does

css,google-chrome,css-animations
Related to this question: Android Holo loading spinner in CSS I have noticed that the accepted answer's first example, the one with images, doesn't work on chrome (i just see a static grey ring) while it works on Firefox and IE 11. Even though the purpose of the question was...

Smooth Infinite Scrolling Banner [CSS Only]

css,css3,css-transitions,css-animations,infinite-scroll
Looking to optimize this infinite scrolling effect, however I'm not entirely sure how to create a smooth transition when looping back to the original image. At 10s it's hardly noticeable, however at 30s it's more evident. I'm assuming it has something to do with the ending position margin, but can't...

How to make a smooth dashed border rotation animation like 'marching ants'

css,css3,svg,css-animations,css-shapes
I'm working on a css animation that uses 'cogs and chains', but am unable to create a 'smooth' border rotation sequence. You can see in this fiddle How (currently) I'm using a pseudo element to generate a 'rotation' effect. This is done by 'switching' between a dashed white and dashed...

How to add and remove a class from a single element with one click…

javascript,jquery,css,css3,css-animations
I’m trying to trigger a complete CSS3 animation with a single click on an anchor element. My current version is working (based on lots of searching here and on Google), but it requires two clickable elements to be present. Here’s what I have so far: http://codepen.io/ProfessorSamoff/pen/rVNOdv As you’ll see, the...

How can I fade out/in a view based on a SELECT change?

javascript,angularjs,css-animations
This is simple to do if we don't mind blatantly violating MVC, but since I'm trying to learn to play nice with angular, I've been tearing my hair out on innocuous little things like this. All I want is for div#thisShouldFade to fade out when a new thing is chosen,...

Revolving nested element around a center

html,css,css3,css-animations,css-transforms
I made this animation of solar system after following codecademy's site : http://www.codecademy.com/courses/web-beginner-en-ymqg0/0/1 I was able to get earth and moon to revolve, but after many trials too, the axis of the moon and astroid is not becoming properly. presently , this is my code : body { background: black;...

How to make a hidden face appear from the top using -webkit-transform: rotateX();

html,css,css3,css-animations
I'm trying to do this 3D transformation effect using css transform : In my attempt the hidden face appears from the right while it needs to appear from the bottom in mouse hover, I don't know what i'm doing wrong , any help on how to fix this would be...

Floating ghost CSS animation

css,svg,css-animations
I have created an SVG ghost for my website's logo. I have made a CSS animation so when a user hovers the logo, the ghost starts floating. Everything works okay except that when it is unhovered, the ghost just drops back to it's original position. Is it possible to have...

CSS3 animation background not work on firefox

css,css3,css-animations
Hello I have this example, it's work fine chrome and opera but not work in firefox check on fiddle body { width: 100%; height: 100%; background: url('http://www.picz.ge/img/s2/1505/17/1/1b588904a0d2.png'); -webkit-animation: mymove 10s; /* Chrome, Safari, Opera */ -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */ -moz-animation: mymove 10s; -moz-animation-iteration-count: infinite; animation: mymove 10s;...

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

javascript,angularjs,settimeout,css-animations,ngroute
I'm new to Angular, so if I'm doing any of these steps all wrong please set me straight. I am trying to get the clamps on the left and right side of my website to animate in on initial page load. Here it is in production: https://www.robotsidekick.com As you can...

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

jquery,html5,css3,css-animations,css-transforms
I need to realize an effect very similar to this included in Kartell.com, clicking on varoius links, especially "FollowUs" and "Search". It is a 3D rotation of a DIV that push to bottom following content. I tried to investigate its code with inspector but I did not find a plugin...

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

css,animation,css-animations
I'm using CSS keyframe animations to create some simple animated text and animation-fill-mode:forward is working for most of it to keep the properties after the animation fires except for the video element. It goes back to it's previous state. I cannot find anything that would be causing it. Here's a...

CSS animations when adding class via PHP [closed]

php,html,css,css-animations
At the moment I have the following code, but my animation will not play. HTML: <div id="errorbox" class="<?php echo("$animate");?>" ><?php echo("$errormsg") ?></div> CSS: #error { opacity: 0 text-align: center; background-color: rgba(255, 0, 0, 0.4); border-radius: 10px; border: 4px solid rgba(255, 0, 0, 0.4); line-height:1.5; -webkit-background-clip: padding-box; /* for Safari */...

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

css,css3,responsive-design,css-animations
Say you are trying to animate a tilable background like this: .container { width: 160px; height: 91px; } .bg { width: 100%; height: 100%; background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center; background-size: contain; -webkit-animation: displace 2s linear infinite; animation: displace 2s linear infinite; } @-webkit-keyframes displace { from { background-position: 0 center;...

Animated text gets hidden after completion of the animation

css,css3,css-animations,keyframe
I had tried a simple animation. See this fiddle. HTML: <div class="special_sec"> <span class="sub_heading">About Us</span> <span class="sub_heading1">Services</span> <span class="sub_heading2">Portfolio</span> <span class="sub_heading3">Clients</span> <span class="sub_heading4">Contact Us</span> </div> CSS: .special_sec span { font-size:30px; list-style:none; text-align:center; padding:10px 0; display:block; animation:subheadinganimation 17s; color: transparent;...

Fullscreen CSS3 “Cube” Transition

css3,css-transitions,css-animations,css-transforms
I am using the code provided here: S/O 2-face Animated Cube I want to make this effect fill up the entire screen of the webpage to provide a fullscreen transition from one div/iframe to the next. I tried using percentages: <style> #experiment { -webkit-perspective: 1000; } html,body{ margin: 0; height:...

CSS :hover issue

html,css,css-animations,pseudo-class,keyframe
I got this problem with my pseudo classes, i have a dropdownlist with anchor taggs in it, like so: <div class="btn-group" id="dropdown-wrapper"> <a href="" data-toggle="dropdown" id="toggle-dropdown">Het 10-stappenplan <i class="fa fa-caret-down"></i></span></a> <ul class="dropdown-menu"> <li><a class="menulink" href="?p=stap1">Stap 1 - Een oriënterend gesprek</a></li> <li><a class="menulink" href="?p=stap2">Stap 2 - De AirAware Quickscan</a></li>...

Rotate elements by an increasing amount

css,css3,sass,css-animations
I have an arbitrary number of <div> elements. I want each <div> to be rotated, but increasing by 2 degrees. How should this be done? I'm not sure if it is possible in just CSS, For example: div:nth-child(1) { rotate(0deg); } div:nth-child(2) { transform: rotate(2deg); } div:nth-child(3) { transform: rotate(4deg);...

Flipping image css transformation

jquery,html,css,css3,css-animations
I have two images on top of each other, I'm using CSS transformations to first rotate both the top and bottom image away, then rotate the bottom image back in, creating a flip effect. However, I can't get it to work flawless, when unhovering the animation state changes to the...

CSS3 Animation should stop at position 75%

css3,css-animations
Is it possible to stop CSS3 Animation at 75% and should not show again at 0% or atleast make delay at 75% for 10s ? As right now when animation completed it shows on at position 0% div { width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation-name: example; /*...

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

css,performance,css3,animation,css-animations
I built a grid of images (stored in $image), which may change in a random order with a random delay. The performance was okay, as long as I haven't had background-position: center and background-size: cover in it. Now with these attributes the images flickers while blending in. How may I...

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
This works in all browsers except IE 11. My code is pretty basic. Click on the text to toggle the class "infinite" which (should) loop the bounce effect forever. IE11 applies the class to the H1 tag but it doesn't animate infinitely like it does in all other browsers. The...

How to make smooth media-query transition back and forth?

media-queries,transition,css-animations
I've been digging all day long with this and can't make it work properly. I'm not a coder, so maybe that's the problem. Anyway, I'm trying to make my logo appear nicely when screen size changes. I realize I can't do it with display:none; to display:block; so I have tried...

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

javascript,css,cookies,css-animations
I tried to find an article on this but I couldn't find one so here I am posting hoping someone can point me in the right direction. I have a CSS keyframe animation that plays on the homepage of my website. Is there a way I can have it play...

CSS sprite animation timing issues

css,css-animations,css-sprites
I can't seem to get the animation timing right on this http://codepen.io/anon/pen/ZYMgqE .spinner { width: 36px; height: 36px; background: url('http://i.imgur.com/CYiaWsF.png') top center; animation: play 1s steps(10) infinite; } @keyframes play { 100% { background-position: 0px -2844px; } } I have tried numerous combinations, but it always comes out looking like...

Circle width animation

css,css3,css-animations,css-shapes
I'm pretty new to CSS3 animations to I'd like to know you how to do the following one: I have a circe: On mousehover, I'd like to have a width transition and obtain this image: Of course this does not work: .logo { width: 100px; height: 100px; border-radius: 50%; transition:...

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

css,css-animations
Does anyone have the CSS code that would generate this flip in/ flip out animation as seen in this short screencast: https://www.dropbox.com/s/18jr4dtdzi8mep6/css-hover.mp4?dl=0 Thanks in advance. -Gerd...

CSS Animation Error

html,css,css3,animation,css-animations
I am trying to create a CSS3 only animation that makes a span (one letter) look like it swings back and forth and then falls off the screen while turning. Here is my CSS: @-webkit-keyframes swing { 10% { -webkit-transform: rotate(15deg); } 15% { -webkit-transform: rotate(-10deg); } 20% { -webkit-transform:...

CSS animation NOT executing in Mozilla using mozAnimationName

javascript,css,css-animations
<style> @keyframes shake { 0% { -moz-transform:scale(0);opacity:0; } 25% { -moz-transform:scale(1.3);opacity:1; } 50% { -moz-transform:scale(0.7);opacity:1; } 75% { -moz-transform:scale(2);opacity:1; } 100% { -moz-transform:scale(1);opacity:1;-moz-transform:rotate(45deg); } } </style> <div style="-moz-animation-duration:2s;" onclick='this.style.mozAnimationName="shake";'>TEST</div> It works fine in Google Chrome with its respective -webkit prefix, but with Firefox (-moz), it doesn't function properly. Is there...

CSS3 animate margins

html,css,css3,animation,css-animations
Trying to animate in CSS3 margins. Which this site seems to say you can, but it's not working for me. Here is a jsFiddle: http://jsfiddle.net/ybh0thp9/3/ (Click on a section to see animation toggle). Here is my CSS: .section{ display: block; animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;...

How to create a single running text using extjs4.2?

javascript,animation,css-animations,extjs4.2,marquee
How to create running text like a marquee non standard HTML element in Extjs4.2 ? This is my snippet code that I've done so far : Ext.Loader.setConfig({ enabled: true, paths: { Ext: '.' } }); Ext.require([ 'Ext.form.*', 'Ext.XTemplate']); Ext.onReady(function () { //Ext.Msg.alert('Fiddle', Ext.get('info').dom.innerHTML); Ext.define('v_label', { extend: 'Ext.form.Label', xtype: 'runningText', renderTo:...

CSS3 animation function for smooth 3D revolution?

css,css3,rotation,css-animations
I have this pen which tries to emulate an object revolving around something. This works, but it isn't smooth. While revolving it pauses around the left and right edges. I thought it had something to do with animation-timing-function but can't get the desired result with any of the in-built functions...

Change CSS3 Animation keyframes

html,css,css3,css-animations,css-transforms
I’m trying to change CSS Animation keyframes, it’s bouncing Y axis direction, but I’m trying to change it to X axis means trying to bounce left to right or right to left. Fiddle: http://jsfiddle.net/5y8ebfcw/ HTML: <div class='thisone'></div> CSS: .thisone { -webkit-animation-name: slybounce; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 0;...

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

css3,css-animations
I am needing to fadeIn a list of text and then fade each one out individually using css. Here is an example I did using javascript. Any help would be appreciated. I have read some examples of how to animate stuff with css but do not know the best practices...

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

jquery,css-animations,clock
I've built a little CSS/Jquery animated clock using code found here, and here. Currently the clocks.js file has the code from codepen, with the international items taken out. But neither one seems to display the current time. All the elements display - clock face, hour hand, minutes hand, second hand....

How to animate an image as it grows from the width of a container to the full viewport width?

css,css3,css-animations
I have a container div with an image inside of it. When a user clicks the image, I want it to grow to fill the viewport width. This works for me, but I want it to animate smoothly as it grows, which does not. How can I make the image...

smoothly sliding in a new div from below

javascript,html,css,css-animations
I am trying to use javascript to append a new div to slide up from the bottom of the screen. I have looked at old SO answers to questions like this one and this one but I still can't figure out how to solve my problem. Right now the previous...

How do I delay the start of some clouds on this webpage?

html,css,web,css-animations,frontend
I'd like to delay some clouds from starting on http://therealrohanm.me/Falcon-Hacks-Website/, neither animate delay nor transition delay seem to work. How would I accomplish this? View the code here: https://github.com/Meeshbhoombah/meeshbhoombah.github.io...

Shrink sticky header with logo by adding a class?

html,css,css-animations,sticky
I've got a header and add a class is-sticky when scroll-position of the page is greater than 0. This header contains an img with my logo. I'd like to shrink the height INCLUDING the one of the img when that class is added. How can I do that? Here's my...

Debugging React CSS Transitions

css,reactjs,css-animations
I'm frequently getting the following warning from React in my console, which is causing some unexplainable animation bugs. I've checked the following usual suspects: All children of a <ReactCSSTransitionGroup> element have key attributes set. All <ReactCSSTransitionGroup> elements have transitionName properties set. All transitionNames have applicable .example-enter, .example-enter-active, .example-leave, and .example-leave-active...

how to make animated 404 gears?

css,css3,jquery-animate,css-animations
I want to make a 404 page with a couple of gears that need to spin for a second or so and then slowly stop spinning and finally stand still completely. This seems to me as a nice effect to let my visitors know that something went wrong (machine/gears stopped...

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

html,css,css-animations
EDIT: corrected a typo in the CSS noted by ARLCode below - not relevant. Using only CSS, I'm trying to animate some text, so that different blocks of text start hidden, become visible on a timer, and then fade on a timer, in sequence. First, I start with all of...

Create an CSS3 animation that starts after X seconds

html,css,css3,animation,css-animations
Im trying to create an animation for a "help window". I would like it to start or have the the image/animation after X seconds, but am having issues as the animation-delay property isn't applicable here as it pauses the still image before playing it. Any ideas for webkits or properties...

Animation transitions behave differently for ng-hide-remove and ng-hide-add

javascript,css,angularjs,css-transitions,css-animations
I am trying to animate a <div> to slide-in/out from the left on a button click. I am using the angular framework and ng-showto control the <div> display/visibility, and adding transitions to the ng-hide set of styles. I have successfully managed to have the div slide in from the left,...

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

css,css-animations
I'm trying to create an infinite animation where a new stroke around a circle runs around the circumference. Initially the stroke is blue, then when it reaches 360 degrees, it appears to disappear in the same direction. But essentially, a similar animation is running on another group of elements in...

append css style to add dynamic transform translate

javascript,jquery,css,css-animations
I have a page with a collection of about 5 images, all scattered on the page with various absolute positions and somewhat varying sizes. My goal is to translate the images to the center of the screen using css and the hover event. Here is my css so far: .bbimage{...

Why is my CSS animation breaking my overflow?

html,css,css3,animation,css-animations
I've spent soo long trying to figure this out, and I cant see any reason why this is causing this error. You can see, that the sun and land are visible outside of my scene div which has an overflow of hidden. Now if you go to the classes below...

keyframe animation using pseudo selectors

css,css3,animation,css-animations,keyframe
How would I properly animate a div with a pseudo selector without out the animation skipping back to the main animation of the div and then playing the animation assigned to the pseudo selector. The element in question is the red circle, that simply needs to move upwards by (X)amount,...

How can I move a div with direction in JavaScript?

javascript,html,css,css-animations
There is a element in HMTL that I would like to move. It is simple. The problem is the element should move in specified degrees, for example 30° deg. How can I do that in JavaScript (and with CSS rotate)? Thanks for all the answers....

rotate animation on selected part of the svg that contains paths

css,css3,svg,css-animations
I have this picture of what my svg looks like (I created it with illustrator) what I want is to rotate animate the upper part circle line of the circle (it has 4 circle lines, lets say the number one circle line start from the bottom inside the circle) from...

Animate CSS Gradient in Bootstrap nav

css,css3,twitter-bootstrap,css-transitions,css-animations
I am working with bootstrap atm and notice my simple css nav button transition wasn't working. I put this down to bootstrap but then removed my gradient background and just had a solid background color and it worked. Does a spec for CSS gradient transitions, does this exist? Is there...

Center image in css animation

css3,css-animations
I have an image which on hover animates size and position. The problem is that the image is not centered after hovering. The animation what I want to achieve is on hover animate the logo to top center and scale down. .col-4 { float: left; width: 25%; position: relative; overflow:...

Css animation In/out

jquery,css,angularjs,css-animations
I'm trying to recreate the dropdown animation of the "new" google developers webpage (you can see here just click over the input search:https://developers.google.com/analytics/devguides/collection/android/v4/app) I can create the "in" animation and the dropdown goes down. But i'm not able to create the "out" animation and make go up the dropdown like...

Stop CSS rotate animation smoothly on unknown keyframe

javascript,css,css3,jquery-animate,css-animations
I have an image that swings using CSS rotate animation. I would like to stop it smoothly (and put it back to its original position when clicking on another element but without getting the jumpy stop feeling). It seems that the expected behaviour only happens on the first iteration of...

Cross fading animation (key frame image duration)

html,css,css-animations,keyframe
Here I have some example css code of a cross fading image animation that transitions between two images, however I'm struggling to figure out how to change the length of the image duration to around 10 seconds rather than an instant transition. The animation length is fine I set that...

CSS Transition Ease not working

html,css,css3,css-animations
I want the icon in the center of the circle to fade in and grow when the checkbox is :checked. The span around the a seems to be working nicely, and so it everything within the a. For some reason, the transition: ease-in-out isn't animating the height/width/opacity - even if...

React CSSTransitionGroup list animation weird behaviour

css3,reactjs,css-animations,react-jsx
I was trying to animate list insertion and removal with ReactCSSTransitionGroup, but the removal animation always animates only the last item of the list instead of the one that's being removed. Here's a jsbin to illustrate this problem. Try pressing the "Add" button to verify that the insertion animation indeed...

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

css,css3,css-animations
I have a block with visible text and hidden. After hidden text became visible, main block will change size. What is the proper way to animate this re-sizing? Is it possible to use pure css solution for this? .wrapper{ padding: 10px} .common{ border: 1px solid #ccc; width: 300px; margin: 0...

How to perform Javascript/CSS3 animation starting from unknown value?

javascript,css,css3,css-transitions,css-animations
I have a <div> whose height I don't know at page load. How can I make it slide into view when page loads, and sticking to the bottom of the page? I expected this code to work, but the div just jumps straight into view without a smooth animation. var...

css animation doesn't work with new dom-element

javascript,dom,css-animations
My css animation doesn't work? http://jsbin.com/torococepu/1/edit?js,output var elem = document.querySelector('.add-elem'), body = document.querySelector('body'); var addNewElem = function(e) { var div = document.createElement('div'); div.className = 'new-elem'; body.appendChild( div ); }; elem.addEventListener('click', addNewElem, false); body.addEventListener( 'DOMNodeInserted', function(e) { e.target.classList.add('set-height'); }, false); ...

Rotating images on a circular path using CSS/SASS

css,css3,sass,css-animations
I came across Hugo Giraudel's excellent tutorial on arranging images on a circle using SASS/CSS, and I am trying to take it another step further by animating the rotation of the circle of images. I have modified a codepen showing one of a variety of unsatisfactory results I am getting....

Prevent CSS “bounce” on :hover

html,css,animation,css-animations
I need some help making transitions a little smoother: http://codepen.io/abenjamin/pen/LVVpwX?editors=110 I've been making tweaks and adjustment for a few hours, but the more I tweak, the more I break -_- Any suggestions or recommendations are welcome! html <h1>Super Awesome CSS Menu</h1> <div class="container"> <input type="checkbox" id="menu-toggle" name="menuToggle"/> <label for="menu-toggle"><span><a href="#"><i...

Smooth mouse-out animation

css,css3,css-transitions,css-animations
I have a diamond shaped div that spins 360 degrees around its own axis on hover by using CSS animation. I can't work it out how to ensure smooth going back to the original state when not hovering anymore? So far it "jumps" when the diamond is in the middle...

Clip child to parent element with border-radius

css,overflow,css-animations,rounded-corners,clip
How do I force clip a child to a parent element that has rounded corners. <div class="item" > <div class="top"> <h1>Tile</h1> <h2>Click me</h2> </div> <div class="behind"> <h3>Details</h3> </div> </div> When animating the child, its ignores the border-radius of the parent element. Is there a way to fix the two corners...

Rotate multiple SVG layers in different directions using just CSS Hover

html,css,svg,css-animations,markup
I'm attempting to rotate SVG layers in different directions when a user hovers over the image. I can easily rotate the div container but of course this rotates the entire image. I've made a start on the code and hoping that one of you bright sparks familar with SVG animations...

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

jquery,css,syntax,css-animations
For whatever reason my the addClass, removeClass is not working in my hover function. I thought it was a syntax issue but even after I resolved the the issue still remains. Please advise. Here is the function $(".run").hover(function(){ //alert("1"); $(this).addClass("animated infinite"); }, function(){ //alert("2"); $(this).removeClass("animated infinite"); } ); And here...

Animate a single word in a sentence with CSS

html,css,animation,css-animations
I'm trying to animate a single word in the middle of a sentence using CSS and HTML. I'm want the word to animate downward and fade out, as a new word fades in from above. My problem is that the rest of the sentence after the animating word isn't spacing...

Pure CSS animation visibility with delay

css,css3,css-animations
I am trying to implement some animation onLoad without Javascript. JS is easy, CSS is ... not. I have a div which should be on display: none; and should be display: block; after 3 secondes. Lots of resources told me animate does not work with display, but should with visibility...

Chrome decodes large image every frame

html,css,google-chrome,css-animations
I'm trying to do some interactive map, where I'm using two very large images (3200x800 and 4096x1024 pixels). Problem is, that Chrome decode image with clouds every frame... so performance is really poor (example in snippet). Found similar problem here, but didn't help. I'm using Chrome 43 (64-bit) on Linux...

jquery rotate max count

jquery,css,css-animations,rotateanimation,jquery-rotate
I have read through countless SO posts and have made numerous attempts, but a whole afternoon later I am still stuck. My code, combined with the jquery plugin that I am using can be seen here at this jsfiddle What am I trying to do? For this project I am...

Smooth CSS animation in reverse

javascript,html,css,css-animations
I recently came across GotoMeeting's website and I was very taken with the animated footer that slides away after you scroll down a bit. I wanted to re-create it myself and I mostly have it working. Here is my fiddle. The issue I have is that when you scroll up...

Pure CSS method of running an animation through on click

html,css,css3,animation,css-animations
I'm trying to recreate the material design ripple effect in pure CSS, and I have the animation prepared. The problem is, I can't make the animation run all the way through when the element is clicked. I've tried with transitions (attempt 1 demo, attempt 2 demo), but neither of these...

Using CSS animations to bump up div's

javascript,jquery,html,css,css-animations
I have a table of div's that I am trying to animate. I want to create an effect where a new div comes in an "bumps up" the previous div's. Here is a fiddle with the three messages. Right now, you can see that Message i3 is overlaying Message 2....

Animating CSS columns and SVG

html,css,css3,svg,css-animations
I am trying to make an effect in CSS to bring next to each other two columns an svg that would be an illustration of the product and some text like a description. so they "slide-in" I want to do this with many products. But i am completely stuck. First:...

Hide an element after 5 seconds only CSS does not work on Firefox

css3,css-transitions,css-animations
For hiding an element after 5 seconds, I have used below code. But it does not work in Firefox. .classname { -webkit-animation: cssAnimation 0s ease-in 5s forwards; -moz-animation: cssAnimation 0s ease-in 5s forwards; -o-animation: cssAnimation 0s ease-in 5s forwards; animation: cssAnimation 0s ease-in 5s forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }...

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

angularjs,css-animations,fade,ng-animate
I have a container on my page, which has a background and a min-height. Inside the container, I have several "page" divs which are toggled with ng-if logic. These pages are dynamic, so the parent container's height depends on the height of these children. The basic structure is like this:...

How do I stop the flickering in this css animation?

html,css,css3,css-animations
The css animation is http://codepen.io/pksunkara/pen/gbejPv. It was inspired by http://codepen.io/fbrz/pen/ljuJn. EDIT: How do you stop the first frame jump in that codepen? HTML of my codepen is given below. <div id="loader"> <div id="loaderout" class="box"> <div id="loaderin" class="box"></div> <div class="ballbox box"> <div class="first-1 ball"></div> <div class="second-1 ball"></div> </div> </div> <div class="ballbox...

css3 animation text repeatly

css,css3,css-animations,keyframe
I am beginner of css3 animation. I want to rotate the text continuously. I tried, this is my fiddle location. https://jsfiddle.net/v3jds98d/ span { font-size:30px; position:absolute; top:40%; text-align:center; width:100%; left:0; color: transparent; opacity:0; -webkit-animation: textanimation 3s ; -moz-animation: textanimation 3s ; -ms-animation: textanimation 3s ; animation: textanimation 3s ; } .animation_text1...

Forcing a CSS animation to complete

css,animation,css-animations,timing
For an artist's web site, where the pictures completely fill the browser window, I want to show a strip of thumbnails which will disappear to leave only the thumbnail for the current image in the corner. When you roll the mouse over this thumbnail, the strip of thumbnails should reappear...

How to change CSS background-position for the X axis only? [duplicate]

css,css3,css-animations,background-position
This question already has an answer here: Is background-position-x (background-position-y) a standard W3C CSS property? 3 answers I'd like to animate the background-position of some div with css like this: @keyframes wave{ from{ background-position: 80% center; } to{ background-position: 160% center; } } This is a very simple animation,...

Delayed CSS3 modal window fade in

css3,css-animations
I have a modal window that I'm trying to have appear after about 7 seconds, with a close button so users can close it if they want to. I got it to close when you click the close button with this code: .tip { z-index: 99999; -webkit-transition: opacity 400ms ease-in;...

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

css,css-animations
I'm a little new to CSS animations, to apologies if this is a silly question :) I have the following HTML: <div class="slideToView" rel="{{product}}"> <div class="info" rel="{{product}}"> Info </div> <div class="remove" rel="{{product}}"> Remove </div> <div style="clear:both"></div> </div> ...and the following CSS: /* slider option */ .slideToView { z-index: 1000000; background:...

Element disappears after the re-appear animation completes

javascript,jquery,html,css,css-animations
Can anybody give me insight into why the element disappears (gets hidden) after the re-appearing animation completes upon hitting the toggle switch .project-list for a 3rd time. Is there a flaw in my if/else statement? Here is the CSS for the animation classes slideDown (disappear) and slideUp. http://www.justinaguilar.com/animations/css/animations.css var main...

How to animate a div using css3

jquery,html,css,css3,css-animations
I have following code: $('.div-1').on('click', function() { $('.block').addClass('animated'); }); $('.div-2').on('click', function() { $('.block2').addClass('animated'); }); html, body { height: 100%; } .div-1 { display: inline-block; padding: 40px; background: tomato; } .div-2 { display: inline-block; padding: 40px; background: tan; } .block2 { background: green; } .animated { -webkit-animation: animateThis 0.2s ease; animation:...

FadeOut/FadeIn animations before/after ngAnimate

css,angularjs,animation,css-animations,ng-animate
I have this form on plunker and a struggling with adding a fade animation. What I want to do is, before the keyframe animation starts have the content fade out. And when the new view appears, I want the the keyframe animation to finish and than an animate.css animation to...

Why does CSS animation have no duration?

css,css-animations
I have a few animations that should go from one state to the other. Going from state empty to state bit works fine and so does from bit to large, but when I try to use the reverse animations which I add as classes, the animations have no duration. Here's...

Transition Animation on Position Property

css,css-transitions,css-animations
I'm attempting to animate a property of position, but can't seem to get it to work. The non-hover CSS is: background: rgba(0, 0, 0, 0.7); position: absolute; bottom: 0; width: 100%; -webkit-transition: all 1s ease; transition: all 1s ease; And the hover is: top: 0; -webkit-transition: all 1s ease; transition:...

keyframes delay between iterations

css,css3,css-animations
Is there a way to make the animation-delay happen not only at the begining but also between iterations? Say you have this example: .lv1 { width: 200px; height: 200px; background: red; animation: flu 1s infinite; animation-delay: 2s; } .lv2 { background: orange; } .lv3 { background: yellow; } .lv2, .lv3...

Animate removal of list items with css

css,angularjs,css3,animation,css-animations
I have made the animation of a showing/hiding a list of messages. See this plunk. But how can I adapt it to also make an animation when a message is removed from the list? My css: .messages-active.messages { max-height: 50px; } .messages { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition:...

CSS transform-origin + stacked divs

html,css,css3,css-animations
I am attempting to rotate/spin-in-place some stacked divs, but the 'transform-origin' property seems to be ignored when using absolute divs. Attached is an example, the divs are stacked using stack class. Would using SVG be a better solution? .circle { height: 250px; width: 250px; border-radius: 50%; border: 50px solid white;...