How to disable CSS3 transitions when zooming? - css

When I use CSS3 transitions on an element's width/height or top/right/bottom/left, and I adjust the page zoom using CTRL+, CTRL- or CTRL0, the browser animates the change to these attributes.
Is there a way to use these transitions, but prevent the browser from using them only when zooming?
EDIT:
Sample HTML:
<div></div>
Sample CSS:
div {
background:red;
height:200px;
width:200px;
-moz-transition:1s;
-webkit-transition:1s;
transition:1s;
}
div:hover {
height:300px;
width:300px;
}
Code also available on jsFiddle.

I've thought of a workaround that uses Javascript to disable the transition while CTRL is being pressed. It handles the keyboard shortcuts listed above, as well as CTRL+scrollwheel, but only when the document has focus.
It can't handle zooming initiated by using the menu, but its better than nothing.
HTML
<div></div>
CSS:
div {
background:red;
height:200px;
width:200px;
-moz-transition:1s;
-webkit-transition:1s;
transition:1s;
}
div:hover {
height:300px;
width:300px;
}
.zooming {
-moz-transition:0s;
-webkit-transition:0s;
transition:0s;
}
jQuery:
$(document)
.keydown(function(e) { if (e.ctrlKey) { $('div').addClass('zooming'); }})
.keyup(function(e) { $('div').removeClass('zooming'); });
Updated jsFiddle. Only tested in Chrome so far.

Try this solution:
http://jsfiddle.net/995zE/
It works by adding the transition css when you click the buttons, and when you zoom the browser window, it removes that css.
This works on Firefox, Chrome, and IE 10. On Firefox and IE, when you zoom, the transition continues as normal, and the zooming doesn't affect it. On Chrome, the transition fast-forwards to its final state.
HTML:
<button id="decrease_width">- width</button>
<button id="increase_width">+ width</button>
<div id="test"></div>
CSS:
div#test
{
width: 100px;
height: 100px;
border: 1px solid red;
}
div#test.transition
{
transition: width 2s ease;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-o-transition: width 2s ease;
}
JavaScript:
var transition_class = 'transition';
var $test = jQuery('#test');
function transition_test(width) {
$test.addClass(transition_class).css('width', $test.width() + width);
}
jQuery("#decrease_width").click(function () {
transition_test(-50);
});
jQuery("#increase_width").click(function () {
transition_test(50);
});
jQuery(window).resize(function () {
$test.removeClass(transition_class);
});

Related

Pointer-events animation not working on Safari

Is there any way to make the next code in Safari? Safari doesn't detect the a tag after hover.
.wrap {
width: 100px;
background-color: grey;
height: 100px;
}
.wrap:hover a {
pointer-events: none;
animation: pointerEvent 0s linear forwards .5s;
}
#keyframes pointerEvent {
100% {
pointer-events: auto;
}
}
<div class="wrap">
Demo
</div>
I need to delay the pointer-event because the a tag is inside a div which has a transformation animation on hover. If I do not delay the event, I can click over the a tag before the transformation ends.
The specific problem is in the footer here
I could not solve it only with CSS, I had to give up and add Javascript code
I had the same problem.
My Javascript solution:
4500 = animation-duration + animation-delay = 4.5 secondsYOURCLASS = Classname of the animation-container[0] = first occurrence of YOURCLASS
<script>
document.getElementsByClassName('YOURCLASS')[0].style.pointerEvents='none';
setTimeout(function(){ document.getElementsByClassName('YOURCLASS')[0].style.pointerEvents='YOURCLASS';}, 4500);
</script>

perform an animation from the current position of the element at 10px on the right

I'm new to this topic of animations. Basically I want to move a div .son in your hover property. I would like this animation to start from its current position at 10px on the right. I am normally able to perform this animation by defining an initial position for "left" and an ending for "left" but in this case I want it to take the initial position in which it is and thus move 10px to the right.
<div class="father">
<div class="son">
</div>
</div>
.father{
position:relative;
width:300px;
height:300px;
border:1px solid red;
}
.son{
position:absolute;
width:100px;
height:100px;
border:1px solid red;
}
.son:hover {
-webkit-transition: all 0.5s ease;
-webkit-animation: fadein_1 0.2s ease-in;
}
#-webkit-keyframes fadein_1 {
from { opacity: 1;left:auto;z-index:2; }
to { opacity: 0; left:10px;z-index:3; }
}
this is my code:
https://jsfiddle.net/ze9vdLa3/it?
thanks
If you can use jQuery, check this :
https://jsfiddle.net/95agyjuo/
jQuery('.son').mouseover(function(){
jQuery(this).animate({
left : "+=10"
})
})
You can accomplish the desired animation using the CSS translateX() function. As #Joe Koker stated, this is more performant than animating the left property.
#-webkit-keyframes fadein_1 {
from {
opacity: 1;
transform: translateX(0px); //start from initial position
z-index:2;
}
to {
opacity: 0;
transform: translateX(10px); //move 10px
z-index:3;
}
}
Your question is a bit vague, but if what you want is to animate an element to the right, it's easy. You almost had it.
Some things:
It's not possible to animate from auto, so I had to change left:auto -> left: 0; (from { opacity: 1;left:0;z-index:2; })
-webkit- isn't necessary
It's not possible to animate z-index either
Here is a working fiddle: https://jsfiddle.net/oqdn6xLg/1/
Though for this use case, I would recommend using the transition property instead, as its simpler. Check out the difference here: https://jsfiddle.net/L04xhgpr/
Note that transform: translateX() performs better, as others have already said :)

CSS animation causes images to flicker

I'm learning how to use transition: in CSS. But for some reason, my images keep flickering instead of giving me smooth animation. I'm developing in Windows 10 with the latest version of Chrome. Here is my code, which is very simple:
function toggleClass() {
var box = document.getElementById('box');
box.className = box.className.match(/active/) ? '' : 'active';
}
#box {
width:200px;
height:200px;
background-color:#999;
opacity:0;
transform:translate(0,30px);
transition:background-color 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}
#box.active {
opacity:1;
transform:translate(0,0);
}
img {
width:100%;
display:block;
filter: grayscale(100%) brightness(120%);
mix-blend-mode:multiply;
}
#box:hover {
background-color:red;
}
<button type="button" onClick="toggleClass()">Toggle Image</button>
<div id="box" class="">
<img src="https://i.stack.imgur.com/GwYD1.jpg" alt="">
</div>
What I want to do is when I press the Toggle Image button, I want a grey scale to fade in. Then when I mouse over the image, I want it to turn red since it is using the mix-blend-mode and the #box should have a red background color.
The problem is that every time I add the active to #box.active, the image doesn't "gradually fade in". Instead, a solid grey box scrolls up and fades in. Once the grey box completes animation, the image then "snaps" into view as if animation duration is 0 seconds. I don't want the image to "snap" into view...I want the image to fade in smoothly just like the grey box.
I want both the grey box and the grey picture to animate in smoothly together.
How do I make this happen?
EDIT
I noticed that if I add the line #box.active {background-color:transparent;}, then the image fades in. But the image is too bright. Applying a #box-active {background-color:#999;} had the same problem as the original question.
EDIT 2
I noticed that if I add these lines, it almost does what I need
#box { background-color:rgba(155,155,155,1); }
#box.active { background-color:rgba(155,155,155,0.9);}
For some unusual reason using rgba along with an alpha of 1 before the active class and an alpha of 0.9, seems to help a little. Now I see the browser "trying" to animate things in smoothly, it's just very choppy now.
Try adding transform: translateZ(0) on the child element img.
function toggleClass() {
var box = document.getElementById('box');
box.className = box.className.match(/active/) ? '' : 'active';
}
#box {
width:200px;
height:200px;
background-color:#999;
opacity:0;
transform:translate(0,30px);
transition:background-color 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}
#box.active {
opacity:1;
transform:translate(0,0);
}
img {
width:100%;
display:block;
filter: grayscale(100%) brightness(120%);
mix-blend-mode:multiply;
transform: translateZ(0); // this rules forces a new layer
}
#box:hover {
background-color:red;
}
<button type="button" onClick="toggleClass()">Toggle Image</button>
<div id="box" class="">
<img src="https://i.stack.imgur.com/GwYD1.jpg" alt="">
</div>
Theoretically your code is correct, this has been a bug in chrome for quite some time.
The translateZ(0) workaround forces chrome to draw seperate layers for the GPU to toy with. You can find more about layers here.
Also note that if you're going for visual consistency, you might have to go with some additional vendor prefixed styling.
As of now, Chrome, Firefox and Edge don't agree on what a blend should look like

CSS transition doesn't work in Firefox when position is changed

I've found annoying bug. I try to animate CSS properties of child elements when at the same time position of parent is changing (in the example it's from fixed to absolute). This works without problem in Webkit browsers, but in Firefox (v. 17.0.1) there's no animated transition.
jsFiddle example: http://jsfiddle.net/chodorowicz/bc2YC/5/
Is there any solution to make it work in FF?
EDIT
It's fixed in Firefox 34
https://bugzilla.mozilla.org/show_bug.cgi?id=625289
CSS
#container {
position:fixed; left:100px; top:100px;
}
#container.some_state_position {
position:absolute;
}
.box {
width:100px; height:100px;
background:blue;
}
.some_state .box {
background:red; width:50px; height:50px;
}
img, .box {
-webkit-transition:all 1.5s ease;
-moz-transition:all 1.5s ease;
-ms-transition:all 1.5s ease;
transition:all 1.5s ease;
}
img {width:100%;}
.some_state .other_container img {
width:50%;
}
It seems you have found a good bug. Although this isn't my favorite fix, it does the job. Change your button2 to do this on click.
$("#button2").on({
click: function() {
$("#container").toggleClass("some_state");
setTimeout(function() {
$("#container").toggleClass("some_state_position");
}, 50);
}
});
It appears for firefox the toggleClass() fires immediately for both classes, causing some issues with the transition effects. Putting the timeout gives jQuery the enough time for it to process what it needs to, in order to do the transitions similar to those in Chrome, etc. I put the timeout to 50ms, this appears to give it enough time for jQuery to process what it needs to do. Going lower than that I saw sometimes, it fail and do what you are currently experiencing.

Why only chrome (and maybe safari) works good with transition (height,width)?

I have a textarea, which stretches (makes height bigger) smoothly:
<style type="text/css">
textarea {
height:20px;
width:170px;
transition-property: all 0.2s linear; /* PS: I don't want to write all prefixes in this question */
}
textarea:focus {
height:30px;
}
</style>
<div style="overflow:hidden;"><!--And some good styles-->
<textarea style="resize:none;padding:10px;"></textarea>
</div>
So, in chrome <div> stretches smoothly (and <textarea> too, what I want), but in opera and firefox <textarea> stretches smoothly, but <div> doesn't.
I tried to add transition to <div>, but without result..
Is there a solution of this? (PS: I have some ideas to solve it with javascript: just add class to <div> onfocus, but can I solve it without js?)
So, I did it: I just add class "active" to <div> on focus of textarea, and on blur: remove class "active" from <div>. All transformations doing by this class, like
div {
height: 20px;
transition: all 0.2s linear;
}
div textarea {
height: 10px;
transition: all 0.2s linear;
}
div.active textarea {
height:30px;
}
div.active {
height:40px
}
It works very well.

Resources