http://jsfiddle.net/kaliatech/PGyKF/
This example has a continuously updating nvd3 line graph.
By default nvd3 introduces a delay in showing the tooltip during a mouse hover.
Is there anyway to disable this?
The controls for adjusting delays and transitions are in css files
Edited nv.d3.css
.nvtooltip {
...
...
transition: opacity 0ms linear;
-moz-transition: opacity 0ms linear;
-webkit-transition: opacity 0ms linear;
transition-delay: 0ms;
-moz-transition-delay: 0ms;
-webkit-transition-delay: 0ms;
...
...
}
Worked!
Related
I have the following animation that is triggered every time a page is loaded. Basically, huge dots cover all the screen, and they will became smaller until disappearing. Its working perfectly fine in all devices but, on Iphone, using Chrome or Safari, when I click to the browsers back arrow, the previous page is loaded and the animation is not trigged. What might be the problem?
.dott{
animation: load-dotts-fadeout .4s ease-out;
-webkit-animation: load-dotts-fadeout .4s ease-out;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-delay: .3s;
-webkit-animation-delay: .3s;
}
#keyframes load-dotts-fadeout {
0% {transform:scale(3.3);}
100% {transform:scale(0);}
}
#-webkit-keyframes load-dotts-fadeout {
0% {-webkit-transform:scale(3.3);}
100% {-webkit-transform:scale(0);}
}
I want to show a menu on clicking on a link. The menu should appear from right to left with show function.
I have already tried
$('.amenu').show("slide", { direction: "right" }, "fast");
But it comes sliding. I want the same effect as
$('.amenu').show("fast");
but menu originating from top right corner.
I've made this fiddle for you which you can use in any way. The idea is that the menu is put in position with this css:
position: absolute;
top: 0;
right: 0;
If you play around you can make it stick anywhere.
The animation is also done with CSS using this class and you can leave only width if you want a slide animation:
.animate {
height: 100px;
width: 300px;
transition: width 1s, height 1s;
-moz-transition: width 1s, height 1s;
-webkit-transition: width 1s, height 1s;
-o-transition: width 1s, height 1s;
}
And a simple jQuery to toggle the class.
https://jsfiddle.net/mtucpL3v/
Further reading: CSS transitions
Has anybody experienced flicker effect like this?
I use Angular with ngAnimate module. Without ngAnimate there is no flicker but also other needed animations goes away. So I need to stay with ngAnimate but get rid of flicker.
Initial state of popup:
.fade-scale {
-webkit-transition: all .2s ease-in-out;
-webkit-transform:scale(0.8);
opacity:0;
}
On tap it adds this class on popup
.show {
-webkit-transform:scale(1);
opacity:1;
}
All of these don't help
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
I have created a CSS3 keyframe animation to light up some candles as a little birthday greeting. The flame is created with pure CSS box-shadows and the :before pseudo element.
Animation:
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation: candle 25s ease-in 1 normal forwards;
-moz-animation: candle 25s ease-in 1 normal forwards;
animation: candle 25s ease-in 1 normal forwards;
Keyframes:
#keyframes candle{
0%{transform: scale(0,0);}
3%{transform: scale(0.3,0.2);}
9%{transform: scale(1,1.1);}
9.5%{opacity: 1;}
10%{transform: rotate(3deg);}
15%{transform: rotate(2deg);}
20%{transform: rotate(-6deg);}
25%{transform: rotate(3deg);}
30%{transform: rotate(2deg);}
35%{transform: rotate(-6deg);}
40%{transform: rotate(5deg);}
45%{transform: rotate(2deg);}
50%{transform: rotate(-3deg);}
55%{transform: rotate(3deg);}
60%{transform: rotate(1deg);}
65%{transform: rotate(-4deg);}
70%{transform: rotate(3deg);}
75%{transform: rotate(2deg) scale(0.8,0.7);}
80%{transform: rotate(-2deg) scale(0.7,0.6); opacity: 1;}
85%{transform: rotate(5deg) scale(0.6,0.5);}
90%{transform: rotate(3deg) scale(0.5,0.4);}
95%{transform: rotate(-2deg) scale(0.4,0.3);}
100%{transform: scale(0.3,0.2);}
}
Each flame has an individual delay and an initial opacity set to 0. The opacity is then overwritten by the keyframe animation.
See here: http://nymphenburg.netz-giraffe.de/
Now, this works fine in FF, Chrome, Explorer > 9 and so on. My only problem is, that is does NOT work with Webkit-Browsers under OS and iOS systems (including iPad and iPhone). It seems that only on those systems the opacity is not overwritten.
Does anyone have any clue how to fix this?
I am a completely new developer and have worked through various tutorials... How can I add an image to my home screen and have the attributes change along with the orientation? I've looked and seen some things but none have worked so far.
Any help is appreciated!
I have actually found a webkit that worked!
img.homepg { width:920px; } #media screen and (max-width:910px) {
img.homepg {
width:670px; } } img {
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear; }
it was used to change text size when stretching a browser page, but by changing text to an img tag it works wonders!