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.
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 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.
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 have a problem with the CSS transition property.
I need to declare two transitions for a section-tag. Every transition with the section should have a duration of 1s, only the background should have a duration of 0.3s
So my CSS-transition code would look like that:
section{
background: black;
transition: all 1s ease, background 0.3s ease;
}
section:hover{
background: green;
transform: translateY(100px);
}
But when I hovering the link now, the background get animated in 1s and it blinks strangely.
Here the codepen Demo
Someone know why this happend? And how can I realize my goal?
And yes, I need the all property!
EDIT
Just found a strange one. In the linked codepen above, it blinks. But when I animate also the padding, it stop blinking! But the background will be animated in 1s...
Here's the second demo
I have tried this in code pen, the problem not in the transition property.
Better you use div tag for the link background and create separate transition for that.
Surely div tag will give the best solution for your problem.
The problem occurred because as you hover over the element, it starts moving downwards.
When the element is not hovered, it would revert back.
Now as you hover, the elements starts moving and then loses the hover immediately which causes it to return to original state but again gains the hover effect as it again receives the mouse-over event which also cause blink, and the strange phenomenon you observed.
If you place mouse close towards the bottom, you observe the desired effect.
The fix should be that you write a hover for the container that contains these elements and apply the effect to these elements.
Besides you've applied transition in only 1 state which also may be the reason for blink;
try using transitions to both the statements like below:
section{
width:300px;
height:300px;
background:black;
color:white;
transition: background 0.3s ease, all 3s ease;
}
section:hover{
background:green;
transition: background 0.3s ease, all 3s ease;
}
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.