I am using transform: translateX in order to be able to create a sliding effect.
The code works fine under Chrome.
In safari, in some screen resolutions and sometimes under firefox I get a small gap during the animation.
When the animated layer stops the gap dissapears.
Initially I have a
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
And after hover, I have a:
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
I have a makeup of my code here:
https://jsfiddle.net/e197mrsb/40/
I would be grateful if someone could help.
use margin 0 on hover class .....
Related
In my css i use the following code to rotate and scale on hover:
.myclass:hover img {
-ms-transform: scale(1.1) rotate(-20deg);
-webkit-transform: scale(1.1) rotate(-20deg);
-moz-transform: scale(1.1) rotate(-20deg);
transform: scale(1.1) rotate(-20deg);
}
This code works on Chrome but not on IE11. Any help?
Thank you in advance
I was having this same problem in IE 11, I could realize that if I reduce the time of the animation could works (ex. 0.3s). But that wasn't a solution for me.
While I was reading How to fix shaking CSS transitions in Firefox: https://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/
I found one solution (for Firefox), and I thought that could work the same concept for IE.
The idea is rotate (the minimum possible) the div or image while your making the scale. Just like this:
#keyframes loading
0%
transform: scale(1);
50%
transform: scale(1.2) rotate(0.02deg);
100%
transform: scale(1);
I made this trick and works in IE 11
I've tried everything I could find, but to no avail. I'm able to get the bootstrap modals to animate in however I like, but adjusting the "out" animation is not working for me. The modal starts to animate and then just vanishes in less than a second.
How do I change the behaviour of the modal dialogue so it can be animated as I choose?
Here's some example code that I've used:
/*Credit: http://hawkee.com/snippet/16154/ - modified by me*/
.modal.fade .modal-dialog {
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
top: 300px;
opacity: 0;
transition: all 1.5s;
}
.modal.fade.in .modal-dialog {
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform: translate3d(0, -250px, 0);
transform: translate3d(0, -250px, 0);
opacity: 1;
transition: all 1.35s;
}
It works just fine - except the "disappearing act".
I am trying to animate two images from the centre, the the opposite sides of each other.
One to the far left, and the other to the far right, with some text in the middle.
see jsFiddle
I have seen on a few websites now an is-visible css attribute (for example, something like this):
.image.is-visible {
left: 0%;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
.image {
background-position: right;
-webkit-transform: translateX(45%);
-moz-transform: translateX(45%);
-ms-transform: translateX(45%);
-o-transform: translateX(45%);
transform: translateX(45%);
I have my transform: translateY(0%); on my jsFiddle, but how do you add a class, for example: is-visible to animate it on the page?
Add Class is probably done by a jQuery
https://api.jquery.com/addclass/
So you just need to define when the class should be added
Maybe while scrolling
Example:
http://codepen.io/LukeD1uk/pen/zvGQZN
Or if the document is loaded
$( document ).ready(function() {
$(".someclass").addClass("is-visible");
});
I am using a js counter which works great in FF, Chrome, safari, IE 11-9 but for some reason the transitions are not working in ie 8/7 (see css code below).The top image is the counter in FF, Chrome, safari, IE 11-9. The second image is from ie8/7. Not sure what I am missing, any help would be greatly appreciated! Thanks!
.prev-top {
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
}
.prev-top.flip {
-moz-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
}
Unfortunately, transform is not supported in IE<9 (nor indeed is any other form of CSS animation), you will likely need to resort to another means of animation, such as .gifs (shudder)
I am rotating an element left by 1 degree. And then rotating the element in it by -1 degree so that the inner element is straight.
Have tested this in Chrome and Safari and it works fine. But in FireFox the inner element rotate is being ignored (still untested in IE).
Any idea what might be wrong?
HTML:
<div class="rotated-left">
<div class="rotated-right">
<p>This text should be straight.</p>
</div>
</div>
CSS:
.rotated-left {
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
}
.rotated-right {
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
}
I tested in chrome, firefox and IE, didn't have issues with any of them. I even removed the browser-specific elements. Still worked.
Make sure you are calling your CSS correctly, maybe?