Syntax: transition: <property> || <duration> || <timing-function> || <delay> [, …]; Note that the duration must come before the delay, if the latter is specified. Individual transitions combined in shorthand declarations: -webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; -moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; -o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; … Read more
According to this link, jQuery animation is much slower then css animation. Reason can be because jquery has to modify the props of the DOM element using timers and a loop. The CSS is part of the browser engine . which depends pretty much on hardware of system. You can also check that in profiling … Read more
display:none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead. … Read more
You are almost good but you have two errors. You need to invert the translations and you need to change the transform-origin of the second one. If you check the documentation, you will see that the reference used to translate the origin is the top left corner of the element and the default value of … Read more
To expand the bottom border on hover, you can use transform:scaleX'(); (mdn reference) and transition it from 0 to 1 on the hover state. Here is an example of what the border hover effect can look like : The border and transition are set on a pseudo element to prevent transitioning the text and avoid … Read more
As I commented, one can’t animate auto (yet), so either use the max-width/max-height trick, or, if you need it to be more exact, set the width using a script. With the max-width/max-height trick, give it a value big enough to accommodate the widest. Stack snippet .myspan { display: inline-block; font-size: 30px; background-color: #ddd; vertical-align: bottom; … Read more
In order to slide the background color up you would need to use a background image, or a gradient of some sort, while gradually adjusting the background-position: .box { width: 200px; height: 100px; background-size: 100% 200%; background-image: linear-gradient(to bottom, red 50%, black 50%); -webkit-transition: background-position 1s; -moz-transition: background-position 1s; transition: background-position 1s; } .box:hover { … Read more
CSS (or jQuery, for that matter) can’t animate between display: none; and display: block;. Worse yet: it can’t animate between height: 0 and height: auto. So you need to hard code the height (if you can’t hard code the values then you need to use javascript, but this is an entirely different question); #main-image{ height: … Read more
Yes, using transition: all could cause major drawbacks in performance. There can be a lot of cases where the browser would look if it needs to make a transition, even if user won’t see it, like the color changes, dimension changes etc. The simplest example I can think of is this: http://dabblet.com/gist/1657661 — try to … Read more
Yes, if such things are supported by the browser, then an event is triggered when the transition completes. The actual event however, differs between browsers: Webkit browsers (Chrome, Safari) use webkitTransitionEnd Firefox uses transitionend IE9+ uses msTransitionEnd Opera uses oTransitionEnd However you should be aware that webkitTransitionEnd doesn’t always fire! This has caught me out … Read more