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/
Related
Is it possible to add a custom CSS shake animation to a Material MatDialog (e.g. if you entered wrong infos in a Form-Dialog)?
Since the dialog is instantiated via the MatDialog service, I can not add a ngClass (with a condition to add and remove the shake style) directly to the template.
Dialog creation looks like this:
constructor(private dialog: MatDialog) {
this.dialog.open(MyDialogComponent, {});
}
The shake style (in the MyDialog Component) like this:
:host#my-dialog {
&.shake-dialog {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both !important;
transform: translate3d(0, 0, 0)!important;
backface-visibility: hidden!important;
perspective: 1000px!important;
overflow: hidden !important;
#keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0)!important;
}
20%, 80% {
transform: translate3d(2px, 0, 0)!important;
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0)!important;
}
40%, 60% {
transform: translate3d(4px, 0, 0)!important;
}
}
}
}
As you can see I tried to add/remove the shake animation via HostBinding. I managed to dynamically add/remove the shake-class this way to my dialog component, however, it takes no effect since all webkit styles are kind of overridden. Inspect in Chrome:
Even though I added an ID to increase the specificity, the shaking styles are not applied. Is this due to the nature of a MatDialog?
Is there any way, I could get this to work? Or did I maybe choose the wrong approach in the beginning?
You should declare the dialog to be in a custom module, where NoopAnimations is used (it disables animations).
Once the animations are disabled, you can override the overlay. Selector is
mat-dialog-container.mat-dialog-container {}
.item {
transition: transform 1s linear;
transform: rotate3d(0, 0, 0, 0deg);
}
.item:hover {
transform: rotate3d(0, 0, 1, 450deg);
}
In the above example Chrome rotates .item a full 450 degrees. While Firefox, Edge, and Safari rotate between the beginning and end states resulting in a smaller 90 degree rotation.
This only seems to occur with rotate3d. Using rotateZ makes all browsers rotate the full 450.
Guessing this is a bug within Chrome? Does anyone know the spec well enough to confirm?
Demo on CodePen.
I have this 3d cube:
http://codepen.io/caemostajo/pen/yORNvx/
, the front and left faces open when click on the 2nd button.
As you can see the left face is misplaced, i can't place it where it belongs mantaining its open animation. it should look like this: http://www.f-lohmueller.de/pov_tut/backgrnd/im/CubeMappingWrapping_1d_64.gif
i have been trying with diferent translate3D and transform-origin values but no luck, think the problem is with the transform-origin of that face when the button is clicked.
I hope someone can help... best of bests!
To place the left face in the right position try to change the x-axis to -100% in .left-flip selector.
translate3d(-100%, 0, $cubeHeight / 2);
This will close the cube.
._3dface--left{
transform: rotateY(-270deg) translate3d(0%, 0, 75px);
}
To animate the other way do
._3dface--left{
transform: rotateY(90deg) translate3d(0%, 0, 75px);
}
I have changed:
.left-flip {
transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
transform-origin: (0px) (0px) (-$cubeHeight / 2);
transform: rotateY(-90deg) translate3d(0%, 0, -$cubeHeight / 2);
}
and
#radio-rotate:checked ~ .space3d .left-flip {
transform: rotateY(-180deg) translate3d(0, 0, -$cubeHeight / 2);
}
The result is this
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.
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?