I have a simple animation (only for Safari in this example):
h1 {
-webkit-animation: moveDown 1s ease-in-out;
}
#-webkit-keyframes moveDown {
0% {-webkit-transform: translateY(-20px); opacity: 0;}
100% {-webkit-transform: translateY(0px); opacity: 1;}
}
In the latest Safari (5.1.5) it works just fine.
But by accident I viewed the example in an older Safari (5.0.6) and saw nothing. The h1 was gone.
By kind of triggering eather by adding a none-rotate (opacity & animation works):
#-webkit-keyframes moveDown {
0% {-webkit-transform: translateY(-20px) rotate(0deg); opacity: 0;}
100% {-webkit-transform: translateY(0px) rotate(0deg); opacity: 1;}
}
or start at 1% (opacity doesn't work but animation):
#-webkit-keyframes moveUp{
1% {-webkit-transform: translateY(-20px); opacity: 0;}
100% {-webkit-transform: translateY(0px); opacity: 1;}
}
it worked again.
This now leads me to two serious questions:
Is there anything I did wrong in the first example?
Is there a known bug in older version of Safari which I should treat different?
Cause:
I don't mind if you can't see the animation in non-supporting browsers (it's just a nice add on) but it would be daring to not know when your animated element just doesn't show up anymore.
How could I be able to use animations in general as an add-on it without worrying?
If anybody askes for a fiddle: I tried recreating it. But here's another interesting thing: The exact same code will not have any effect in the old Safari in jsfiddle. Nor it animates or dissapears.
Edit:
I'm just seeing that the h1 is not dissapearing anymore with the original code (I can't reconstruct it) but doesn't do any animation eather. It just works with one of the described triggers.
JS-FIDDLE:
Here a working fiddle with the two examples.
I don't have an old version of Safari handy, but I recall playing with animations in older versions and encountered these types of bugs. I worked around them by putting the 'end state' in the selector, e.g. p {opacity: 1} http://jsfiddle.net/pkFaT/
Related
I made a little CSS animation with a simple svg to transition my hamburger menu to a cross. It works as expected on Chrome and Firefox, but the translation is off in Safari. The animation plays, and even resets correctly so it has nothing to do with prefixes (I tried). The translate of the two lines making the cross is just wrong.
I'm guessing it has something to do with how safari handles the transform when scaling is also applied. Does anyone know if there is a work around / or what I'm doing wrong?
JSFiddle
Safari / Firefox / Chrome
#keyframes showCross {
0% {
transform: scale(1) rotate(0);
}
40% {
transform: scale(0.3) rotate(280deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
#keyframes showCross_P1 {
0% {
transform: rotate(0);
}
100% {
transform: rotate(-45deg) translate(-42%, -10%);
}
}
I fixed it by doing the following:
First I removed the groups surrounding the paths.
Then I gave all the paths the following values:
transform-origin:center center;
transform-box: fill-box;
Next I edited the animation keyframes to look as follows:
0% {
transform: translate(0rem,0rem) rotate(0);
}
100% {
transform: translate(-10rem,-38rem) rotate(-45deg) ;
}
Safari has problems with percents and also if you put the rotation before the translate it has inconsistency with other browsers, use rem instead!
In contrast to the Bootstrap tooltip, the ng-bootstrap Tooltip for Angular 2 at https://ng-bootstrap.github.io/#/components/tooltip has no provision for a delay, so the tooltip pops up immediately.
I see an issue about this 'ngbTooltip: add new option "delay"' at https://github.com/ng-bootstrap/ng-bootstrap/issues/1052 but it is listed as "No one assigned".
Is there a workaround that could be applied to simple code like https://ng-bootstrap.github.io/app/components/tooltip/demos/basic/plnkr.html to add a delay?
Is there some way of assessing whether a delay capacity is likely to be added to ngbTooltip?
As stated in this comment, you can achieve it with pure css:
.tooltip > div {
animation-name: delayedFadeIn;
animation-duration: 1s; /* Adjust this duration */
}
#Keyframes delayedFadeIn {
0% {opacity: 0;}
75% {opacity: 0;} /* Set this to 99% for no fade-in. */
100% {opacity: 1;}
}
If you want to make it optional, you can define another class such as .delayed:
.delayed.tooltip > div {
animation-name: delayedFadeIn;
animation-duration: 1s; /* Adjust this duration */
}
#Keyframes delayedFadeIn {
0% {opacity: 0;}
75% {opacity: 0;} /* Set this to 99% for no fade-in. */
100% {opacity: 1;}
}
There is a GitHub feature request at https://github.com/ng-bootstrap/ng-bootstrap/issues/1052 asking for adding delay to ngbTooltip, but so far there is no action on this.
if you want to use S.alems code and make tooltips appearing a little longer (make a delay before appear) everytime with no using javascript or adding and removing classes
you need to just use it like this:
.tooltip.bottom.in.fade{
animation-name: delayedFadeIn;
animation-duration: 1.1s; /* Adjust this duration */
}
#Keyframes delayedFadeIn {
0% {opacity: 0;}
75% {opacity: 0;} /* Set this to 99% for no fade-in. */
100% {opacity: 1;}
}
I did even create account to post this :)
Since version 4.1.0 there is an option to set openDelay and closeDelay. See its documentation.
Values are in ms so to set the open delay to 1 second and close delay to 2 seconds use following code:
<span
ngbtooltip="my tooltip text"
openDelay="1000"
closeDelay="2000">
</span>
I seem to have an issue with the webkit animations. I added an overlay spinner. This one shows fine on every browser (Mozilla, IE, Edge, Chrome). On Andriod and iPhone/iPad the animation is not fired. Am I missing something in my code?
In CSS I added following to the div of the element:
-webkit-animation-name:webkit-rotate-scale;
-webkit-animation-duration:0.75s;
-webkit-animation-direction:normal;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-play-state:running;
and
#-webkit-keyframes webkit-rotate-scale {
0% {-webkit-transform: rotate(0deg) scale(1);}
50% {-webkit-transform: rotate(180deg) scale(.5);}
100% {-webkit-transform: rotate(360deg) scale(1);}
}
Off course I added the standard (no webkit) alternatives also.
Can someone tell me what I'm missing?
The div where I am showing it in has display: inline-block.
Thanks in advance!
Kind regards,
Jerry
This question was orginally related to FontAwesome, but is a general firefox problem.
So i'm using the class fa-spin that will spin the icon, here you can find some examples of it.
Here is the spinning css file:
// Spinning Icons
// --------------------------
.#{$fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
#-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
Now all works fine in chrome and IE10, however it doesn't in firefox :
jsFiddle.
When you run it for the first time it looks just good, but try the interact with the site(for example: scroll or run the script again in jsFiddle). The animation becomes all jittery. I have no idea what could cause this strange behavior, hope that anyone could help me.
Edit
The problem occurs on Windows 7 32-bit and 25.0 version of Firefox(No add-ons).
However it does work at my home PC, where it also has Windows 7 32-bit 25.0 firefox.
An preview how it looks on my screen:
Note that it works for the first couple of seconds but after it will get jittery (this stuttering is because my .gif is bad).
See my answer for more information
Before you want to add this 'hack', you should first try to update your driver
What i did notice is that IE and Chrome actually makes the text blurry, which FF doesn't. I thought of using the blur filter, but that didn't work. Also the font width didn't stayed the same, so i needed something that or reminded the client of his width or force the width to be static at all time.
I came across the SVG filter XML url, that was special for Firefox 10+ and Firefox on android. I tryed to apply this to my element and my problem was completly gone!
i did use <feColorMatrix type=saturate values=1/> so the saturate filter didn't take away the colors.
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'1\'/></filter></svg>#grayscale");
When adding this to the .fa-spin class that FontAwesome uses, it'll work on every spinning element.
jsFiddle
The platform were I work does not support #keyframes because of security reasons with the #.
My question is if I can replace it with some other css trick.
For example I have this code:
.cubo {
animation:giro 25s infinite linear;
}
#keyframes giro {
0% {transform: rotateX(0deg) rotateY(0deg);}
100% {transform: rotateX(1080deg) rotateY(360deg);
}
}
Can I replace it with transitions or transforms to avoid using the #? (no javascript supported either).
You could instead make it a transition by multiplying the transition duration, rotateX, and rotateY values all by a common factor x and applying the transition class on page load. In my example I multiplied them by 40, but you can go as high as you want but I wouldn't go too high because the processor might overload at some point and break the page. This runs for 1000 seconds, not many people will stay on a page past that
Here is a live demo of that approach
/* CSS */
.cubo {
/* ...Your other code... */
transition: all 1000s linear;
}
.animate {
-webkit-transform: rotateX(43200deg) rotateY(14400deg);
-moz-transform: rotateX(43200deg) rotateY(14400deg);
-o-transform: rotateX(43200deg) rotateY(14400deg);
-ms-transform: rotateX(43200deg) rotateY(14400deg);
transform: rotateX(43200deg) rotateY(14400deg);
}
/* Javascript (ran on page load) */
document.getElementsByClassName('cubo')[0].classList.add('animate');