css-transitions

I'm using waypoints to toggle a class which creates a CSS transition based on an offset. This is css transition decreases the height of an element. I've tried using the refresh function to recalculate the DOM once each waypoint is passed, but I'm not sure I'm doing it right or maybe I'm slightly restricted here. You can view the site here: http://dev.rostylesalon.com/ jQuery('#aboutwrap').waypoint( function() { jQuery('#aboutwrap .section-header').toggleClass('header-animate'); $.waypoints('refresh'); }, { offset: 300 }); jQuery('#servicewrap').waypoint( function() { jQuery('#servicewrap

I've read several similar questions on SO regarding Bootstrap's fade classes, but none of them seem to address my issue. I understand that the fade animation in Bootstrap 3 works by switching opacity between 0 and 1 when you add the .in class to an element that already has a .fade class. This works fine for me when dealing with an element that already exists in the HTML (for example, this JS Fiddle demo ). The problem is that the transition doesn't seem to happen when the element is created dynamically with Javascript. For example, the following code will create and display an alert, but the

I wonder If anybody knows a clever and new way how to make a transition between two background images? I know there are multiple tutorials out there just most of them are outdated and old. I wonder if there is a clever and modern CSS3 way of doing something like this. I have a simple logo.png set as background to a div.logo (I want it to be set as a background image not via img src ). And when I hover over it I want a smooth transition to "logo-hover.png" which is the same file just in a different color. Any ideas how to do this nowadays? My approach would be this: - I create a outer container

I have a some basic button styles where on :hover I add the letter-spacing property: .btn { display: inline-block; text-align: center; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s ease; } .btn-primary { background-color: #8065F1; color: #FFFFFF; } .btn-large { border-radius: 32px; box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23); padding: 0.25rem 3rem; font-size: 1.5rem; text-transform: uppercase; } .btn:hover { letter-spacing: 4px; } <button type="button" class="btn btn

I'm trying to make an animation using a PNG sequence, which has a transition on hover, and animates back when the hover state ends. For this I'm using a css transition with a "steps" timing function, like so: transition:background .5s steps(9, end); See the fiddle for a live example (I've used a random PNG sprite that I Googled, it's not the one I'm actually using) http://jsfiddle.net/MLWL5/ Basically this is working fine, when you hover over the element slowly. When you quickly hover on and off the element, the transition seems to trigger when the background image if halfway through the