I want to use different duration for each transition property. For example for width I want to have a transition with 0.3s and for height 0.6s.
Is it possible in CSS3 ?
Sure, you can list different transitions with a comma separated list: transition: color 0.25s ease, border 1s linear
transition: width 0.3s, height 0.6s;
Just use the shorthand transition property instead. Don't forget vendor prefixes.
Fiddle: http://jsfiddle.net/2dwgg/
Related
I'm making a drop down menu with CSS & using CSS transitions to fade & move the menu into display. This is working fine by altering the top & opacity values but the problem is when the menu is hidden it is still over other elements on the page so they cannot be interacted with, even though the menu is not visible.
My solution to this problem is that use z-index to place the menu behind everything else when it's not visible but I cannot get it working with the transitions. When I use the code below the z-index changes as expected & the menu can be shown & hidden but it does not animate.
transition: top 0 .3s ease-in, opacity 0 .3s ease-in, z-index 0;
The code below here transitions fine but the z-index change happens before the transitions so you can end up with the z-index putting the menu behind other content then then transition happening where it cannot be seen.
transition: top 0 .3s ease-in, opacity 0 .3s ease-in;
I've worked out what my problem is now, I had the shorthand values in the wrong order & the 0s require the unit of measurement after, so it this case they should have been 0s.
Here's the working code applied to the non-hover state for the drop down, this takes affect when the menu is transitioning to its hidden state:
transition: top .3s ease-in 0s, .3s opacity ease-in 0s, 0s z-index ease-in .3s;
Here's the code applied to the hover state of the drop down which takes affect when the menu is transitioning to its visible state.
transition: top $default-animation-timing ease-in 0s, $default-animation-timing opacity ease-in 0s, 0s z-index ease-in 0s;
As a side note, but related to why I had this problem, when looking up documentation on MDN the "Initial value" list is written in alphabetical order, not in the order the values should be added. I assumed they were in the order they should be used which is why I had my value ordering wrong.
I stumble upon this code around:
-webkit-transition: all 0.1s ease-in;
-moz-webkit-transition: all 0.1s ease-in;
what does this do? can someone please explain further, I don't understand samples on w3schools and MDN. I'd really appreciate
a transition describes how a css layout will "transition to another layout" to break it down
the first element
-webkit-transition: all 0.1s ease-in;
all describes which css properties to apply the transition effect to
The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied. mdn transition property
0.1s describes the duration
ease-in describes the type of transition
so -webkit-transition: all 0.1s ease-in;
this is saying for all css Properties i want a .01 second transition time using the ease-in transition mode
MDN
CSS3 Transitions are basically when the element in the DOM is moving.
For example it would rotate a rectangle div; it could enlarge or stretch the element.
I'm using CSS transitions on the ::after pseudo-element and it's working perfectly fine in Chrome and Firefox; however, it's not working as expected in Edge. The background color transition is working on the pseudo-element, but the width isn't.
Here's my current code: http://codepen.io/anon/pen/ZbYKwv?editors=110
For the purpose of being able to see the transition clearly, I increased the duration from 400 ms to 4000 ms. I also added a white background to the <label> because Edge doesn't seam to support a data URI SVG for a background image (I'm actually using a file, but I can't upload that to CodePen).
So what can I do to make the width of the pseudo-element animate as expected on Edge?
Try by adding the prefixes for all browsers at the transition rule:
-webkit-transition: all 4000ms ease;
-moz-transition: all 4000ms ease;
-ms-transition: all 4000ms ease;
-o-transition: all 4000ms ease;
transition: all 4000ms ease;
This should transition work on every browser.
Besides that, you can try to specify a width value for the nav when the #nav-toggle is checked, even if it is the same value given for .nav.
IE and FF often have issues with transitions with max-width/height.
If I have a series of divs all with float: left and I resize the browser so they wrap, can I animate their transition to their new location using only CSS animations (no JavaScript)?
Without using JavaScript that's most likely a no...
CSS transitions and animations rely on the elements' CSS properties changing. The line wrap behavior you're seeing when the window is resized doesn't change the elements' properties, so you won't have anywhere to add a transition.
Even with JavaScript I doubt creating the effect you're after would be trivial, you may want to check out a plugin like Masonry
You can try use transistions, but I think that in your example it's not possible without JS.
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
Is there a reliable CSS way to warp/deform a rectangular image into a circle or arc?
I know how to stretch and so on, but applying a shape deform seems to be impossible. Is this right..? Maybe an SVG transform..? Ideally, it would be a transform that is transitionable.
not talking about using border radius to simulate flat shapes, but actual deform of an image.
No, this is not possible yet because only linear transformations are supported by CSS.
However, the answer to this similar question has an example using experimental filters from Adobe to create a sucking effect: How to use CSS 3d matrix to create a curved deformation effect
When and how is the rectangle going to transform? If it's on say, a :hover state, then all you need is:
HTML
<img src="#" class="img-circle" />
CSS
.img-circle:hover {
border-radius: 50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Here is an example: http://jsfiddle.net/YcacT/
Do you need this one?
.circle {
border-radius: 50%;
}
http://jsfiddle.net/6AHTb/
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.