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.
Related
I am trying to make a simple pure CSS slider for the FB page widget. The thing is that the code works for all of the major browsers exept MS Edge and IE.
.slider {
-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
-o-transition: right 1s ease-in-out;
transition: right 1s ease-in-out;
}
Everytime when I move the mouse cursor to the FB iframe the transition is cancelled. I tried to add the overlay and pointer-events as a iframe's parent but effect is the same.
Is this the MS Edge bug or I am doing something wrong?
I am giving working CodePen.
EDIT: I don't wanna use jQuery. As I mentioned before it has to be pure CSS animation.
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'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;
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/