Im using this plugin 'SidebarTransitions by codrops' for making a sidebar-menu..
For show/hiding the menu, its using this translate3d css
.st-effect-1.st-menu {
visibility: visible;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-1.st-menu-open .st-effect-1.st-menu {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
My problem is when i fill the site with alot of data, like 20000 rows in a table, the translate3d effect becomes really slow in IE (using 10 or 11 atm), takes like 5-10sec to do the effect and uses a 100% cpu core..
The same effect in Chrome appears instantly, why? what to tweek for IE to work?
Related
I'm trying to animate some shapes made with CSS-Doodle which will be a part of my background. Basically, I want them to always float around the screen and always rotate but I want the two animations at different speeds.
With the code below I can only get either one to work by switching around the order of chaining.
animation: spin #r(3s, 10s) infinite, flow #r(20s, 40s) infinite linear;
#keyframes flow {
0%, 100%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
50% {
-webkit-transform: translate3d(#r(-500%, 1000%), #r(-500%, 1000%), 0);
transform: translate3d(#r(-500%, 1000%), #r(-500%, 1000%), 0);
}
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
I'm hoping there's a way for both of them to be applied at the same time even if it's not pure CSS.
There's probably a better way but the simplest solution would be to put a wrapper around the element so that the wrapper gets one animation and the actual element gets the other animation.
This is how it was done in Bootstrap 3:
.modal.fade .modal-dialog {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
Or something like this would have worked as well:
.modal.fade .modal-dialog {
transform: translate3d(0, -25%, 0);
}
.modal.in .modal-dialog {
transform: translate3d(0, 0, 0);
}
The magic obviously happened in the modal classes with the transform property. But this does not work in Bootstrap 4. I am specifically using Bootstrap v4.0.0-alpha.5. What changes do I need to make to achieve the same effect?
Demo url - https://jsfiddle.net/qww47vfn/
Found it, apply the following CSS:
.modal.fade .modal-dialog {
-webkit-transform: translate(0,25%);
-ms-transform: translate(0,25%);
-o-transform: translate(0,25%);
transform: translate(0,25%);
}
I've inverted the transform origin, instead of -25%, it's now 25% (effectively making it fade in from below). Adjust the amount to adjust the initial fade in position.
What changed?
Instead of translate3d the property translate is now being used, so changing the original values won't matter since the model listens to the new properties now.
Side note:
This doesn't work when you implement it as a new rule for some reason, I don't have a local version of bootstrap, but changing it inside the DevTools solved it for me. I suppose you need to overwrite the initial code to change it.
I have a CSS animation on a Website to make a hover effect on a button.
In Chrome and IE it lokes fine but in Firefox I got a ugly issue.
some White pieces still standing after hover.
Animation CSS:
.Hotel:hover{
animation-name: pulse;
animation-duration: 1s;
}
#-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(100.10, 10.10, 10.10);
transform: scale3d(100.10, 10.10, 10.10);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.80, 1.80, 1.80);
transform: scale3d(1.80, 1.80, 1.80);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
Everything Looks fine it might be due to hardware acceleration settings not be on
Use hardware acceleration when available turned on .
Currently, browsers like Chrome, FireFox, Safari, IE9+ and the latest
version of Opera all ship with hardware acceleration; they only use it
when they have an indication that a DOM element would benefit from it.
With CSS, the strongest indication is that a 3D transformation is
being applied to an element.Since you have already that done your
then other than hardware acceleration turned on nothing seems to cause problem
its fine in my browser.
In Chrome and Safari we might see a flickering effect when using CSS transforms or animations. The following declarations can be used to fix the issue:
.className{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
/* Other transform properties here */
}
Another method that seems to work well in WebKit-powered desktop and mobile browsers is translate3d:
.className{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}
Native mobile applications also make good use of the device GPU –– that’s why they’re known to perform slightly better than Web apps. Using hardware acceleration can be especially useful on mobile devices because it helps reduce resource consumption on the device.
This animation does not behave as I'd expect it to in IE11.
It should open like a book.
It was created in Google Web Designer (omitted large portions of the code for brevity).
JSFiddle (open in IE11)
However the following DOES work in Chrome (only difference is I've included the WebKit prefixes).
JSFiddle (open in Chrome)
Points of interest:
#keyframes mykeyframes {
0% { transform: translate3d(0px, 0px, 2px); }
100% { transform: matrix3d(-0.9998476952, 0, 0.0174524064, 0, 0, 1, 0, 0, -0.0174524064, 0, -0.9998476952, 0, 0, 0, 2, 1); }
}
Update
Just noticed that if you don't animate it "fully" (so it only swings open part way) then it works fine in IE11 - http://jsfiddle.net/e45q5/3/
Update2
I believe it's related to this bug: https://groups.google.com/forum/#!newtopic/gwdbeta/gwdbeta/EOKnHw5qXmk
I'm not able to debug a matrix3d value, but I can emulate the effect by editing your animation:
#keyframes mykeyframes {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-180deg); }
}
http://jsfiddle.net/e45q5/2/
I'm using deck.js for a presentation. For one slide, I want a static header with figures/images that I can carousel through. Here's the relevant HTML:
<section class="carousel slide">
<h2>Static Title</h2>
<figure class="slide"><figcaption>Text for first image</figcaption><img src="images/first_image.png" alt=""></figure>
<figure class="slide"><figcaption>Text for second image</figcaption><img src="images/second_image.png" alt=""></figure>
<figure class="slide"><figcaption>Text for third image</figcaption><img src="images/third_image.png" alt=""></figure>
</section>
And here's the JS I've added to deck.js to make this work with the horizontal-slide theme that comes with deck.js.
.carousel .deck-before {
-webkit-transform: translate3d(-400%, 0, 0);
-moz-transform: translate(-400%, 0);
-ms-transform: translate(-400%, 0);
-o-transform: translate(-400%, 0);
transform: translate3d(-400%, 0, 0);
height:0;
}
.carousel .deck-after {
-webkit-transform: translate3d(400%, 0, 0);
-moz-transform: translate(400%, 0);
-ms-transform: translate(400%, 0);
-o-transform: translate(400%, 0);
transform: translate3d(400%, 0, 0);
height:0;
}
.carousel .deck-next {
-webkit-transform: translate3d(200%, 0, 0);
-moz-transform: translate(200%, 0);
-ms-transform: translate(200%, 0);
-o-transform: translate(200%, 0);
transform: translate3d(200%, 0, 0);
height:0;
}
.carousel .deck-previous {
-webkit-transform: translate3d(-200%, 0, 0);
-moz-transform: translate(-200%, 0);
-ms-transform: translate(-200%, 0);
-o-transform: translate(-200%, 0);
transform: translate3d(-200%, 0, 0);
height:0;
}
This works great when the carousel of images is going forward. However, when I go back, the image that is moving off the screen shifts down so it is below the spot where the new image is entering.
How do I make it so that the image that is moving off the right of the screen stays level with the image that is coming on the screen from the left?
The root of your problem comes from the fact that height does not transition, so at the moment when the class change happens that previous element immediately has a height, pushing down the slide that still hasn't transitioned out of view.
This is a fairly tough problem to solve. You'll need to make some choices based on your needs.
First, take out the height:0 from each of your before/after/previous/nexts and just say .carousel .slide { height: 0 }.
Do you need the deck.scale extension to work, or do you have slide content after the carousel? If so, you'll need to give .carousel a height to compensate.
Do you know that height in advance? Just set it in the CSS.
Don't know the height, or just want to use this everywhere without having to set the height by hand each time? Write a small script that checks carousel contents and sets the height. Something like this (untested, beware):
$(window).load(function() {
$('.carousel').each(function(carousel) {
var $carousel = $(carousel);
var maxHeight = 0;
$carousel.each(function() {
var height = $(this).height();
maxHeight = Math.max(height, maxHeight);
});
$carousel.height(maxHeight);
});
});
With a script like that, be sure to completely remove the height:0 declarations from CSS.