Based on Michaels answer this is the actual CSS code to use .parent:hover .child { display: block; -webkit-animation: fadeInFromNone 0.5s ease-out; -moz-animation: fadeInFromNone 0.5s ease-out; -o-animation: fadeInFromNone 0.5s ease-out; animation: fadeInFromNone 0.5s ease-out; } @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; … Read more
You can transition background-image. Use the CSS below on the img element: -webkit-transition: background-image 0.2s ease-in-out; transition: background-image 0.2s ease-in-out; This is supported natively by Chrome, Opera and Safari. Firefox hasn’t implemented it yet (bugzil.la). Not sure about IE.
This is not a bug– you can only transition on ordinal/calculable properties (an easy way of thinking of this is any property with a numeric start and end number value..though there are a few exceptions). This is because transitions work by calculating keyframes between two values, and producing an animation by extrapolating intermediate amounts. visibility … Read more
The solution is mentioned here: iPhone WebKit CSS animations cause flicker. For your element, you need to set -webkit-backface-visibility: hidden;
It looks like you’ve got a handle on how to do them, just not when to do them. A transition is an animation, just one that is performed between two distinct states – i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state … Read more
W3C CSS Transitions Draft The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition. Webkit To determine when a transition completes, set a JavaScript event listener function … Read more
For transitions you can use the following to detect the end of a transition via jQuery: $(“#someSelector”).bind(“transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd”, function(){ … }); Mozilla has an excellent reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition For animations it’s very similar: $(“#someSelector”).bind(“animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd”, function(){ … }); Note that you can pass all of the browser prefixed event strings into the … Read more
You can use CSS3 transitions or maybe CSS3 animations to slide in an element. For browser support: http://caniuse.com/ I made two quick examples just to show you what I mean. CSS transition (on hover) Demo One Relevant Code .wrapper:hover #slide { transition: 1s; left: 0; } In this case, I’m just transitioning the position from … Read more
You can run a CSS animation on page load without using any JavaScript; you just have to use CSS3 Keyframes. Let’s Look at an Example… Here’s a demonstration of a navigation menu sliding into place using CSS3 only: @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } header { /* … Read more
Gradients don’t support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.). If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and ‘transition` the opacity. (There have been some browser releases that supported transitions on … Read more