css-animations

I'm trying to build a dropdown menu where first the dropdown slides down, then one-by-one menu items appear from the bottom. On hover, it looks good but I don't know how to play it smoothly on hover off. What I'm trying to do is hide the second sub-menu item first, then the first submenu item, then the dropdown slides up. What I tried is to add the hide animation keyframes with a delay by default to the dropdown, and add the show animation on hover with 0 delay. But its not working properly as you can see.(and it will animate on page load too, which is not good for me) ul li ul { -webkit

I can currently show/hide an element according to a boolean condition in my controller. How can I fade the element out if the condition is true instead of just instantly hiding it? <div id='conversion-image' ng-hide="pages.length > 0"> generating pages... <br /> <img src='Images/ajax-loader-blue.gif' /> </div> I also already have the ngAnimate dependancy included as well. var app = angular.module("app", ["ngAnimate"]); You can do it with CSS and ng-animate as the following: .fade-out.ng-hide { opacity: 0; } .fade-out.ng-hide-add, .fade-out.ng-hide-remove { transition: all linear 0.5s; } .check

I'd like to animate a list of items. The first should animate with 0ms delay, the second should do the same animation with 50ms delay, third with 100ms delay and so on. The list is dynamic so I won't know the length. Is this possible? Note: I don't need help with animations / keyframes specifically, but how to use nth-child or nth-of-type (or anything else?) to achieve a progressive animation delay based on relative position between siblings. I'm using React / SASS / Webpack if that helps. I can use jQuery if necessary but I'd rather avoid it if possible. Here's an example on how to do

DEMO: http://plnkr.co/edit/cPDUWO?p=preview I have 2 checked checkboxes and 2 widgets displayed on the page. Clicking the checkboxes will use ng-show & ng-hide to hide and show the corresponding widget. Now I want to also have a basic fadeIn and fadeOut , however no luck so far :( The widgets that show/hide without any fade animation. Can you see where I'm going wrong? Controller animateApp.controller('mainController', function($scope) { $scope.pageClass = 'page-home'; $scope.widget_manage_quotes = true; $scope.widget_manage_customer = true; }); CSS .reveal-animation.ng-enter { -webkit

I am trying to get off javascript animations and use CSS animations instead. I am currently using jQuery's animation functionality. I came across this website with a bunch of wonderful css animations. Such as: .demo1 { -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -ms-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; } .demo1:hover { -webkit-transform:translate(0px,10px); -moz-transform:translate(0px,-10px); -ms-transform:translate(0px,-10px); -o-transform:translate(0px,10px); transform:translate(0px,-10px); } What I can't figure