I having issue to override transition-delay on firefox. Below example works as i expected in Chrome and IE but at Firefox, before animation it is delaying. I am not able to override transition-delay on firefox before animation starts. I believe this is a bug but what is workaround of this problem?
Here is jsfiddle link
Here is Html Codes
<button>move</button>
<div class="box"></div>
Javascript
$('button').click(function(){
$('.box').addClass('move').on('transitionend',function(){
$(this).removeClass('move');
});
});
And CSS
.box{
height:100px;
width:100px;
background-color:yellow;
transition:all 1s ease 1s;
position:absolute;
left:0;
}
.move{
transition-delay:0;
left:500px;
}
You just need to include a unit (seconds in this case):
.move {
transition-delay: 0s;
left: 500px;
}
Updated fiddle
This answer explains why: Units on "0s" Transition in Firefox
Related
I've seen this type of animation on a website just when CSS3 key-frames started to gain momentum, but couldn't find it nor could I replicate it using CSS or jQuery, and here's where I thought some of you could help.
I've animated what I hope to achieve and I've embedded it below. I believe this can be coded using the new CSS3 key-frames or jQuery's .animate(); feature. I don't know. I've tried everything I know, but all in vain.
Here's the GIF animation of what I wanted:
I just noticed, http://droplr.com/ uses a very similar transition on their home page, but with a few sliding effects. And the data (words) that come up are all random, all the time. I'd like to know how that is possible!
DEMO
A possible solution with pure css!
#-webkit-keyframes fade-in{
from{
opacity:1;
top:0px;
}
to{
opacity:0;
top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;
}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}
.aggettivi{
display:inline;
width:100px;
height:100px;
}
I know that question is solved, but I thought it might be helpful for someone else so I decided to share xD
I was looking for something more smoother than the sugestion that here was presented, after spend a time looking i made my own solution
Here we will need to think a bit in terms of timeline of an keyframe, in that case the text will only be displayed when the another one has already completed his fade animation
div{
posititon: relative;
}
.js-nametag{
position: absolute;
}
.js-nametag:nth-child(1){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate-reverse;
}
.js-nametag:nth-child(2){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}
#keyframes fade{
0%,50% {
opacity: 0;
}
100%{
opacity: 1;
}
}
<p class="js-nametag">Leandro de Lima</p>
<p class="js-nametag">Game Master</p>
https://codepen.io/theNewt/details/PdWeKX
Some extensive Google Searching and experimenting has led me to the point where I can answer my own question, and just in time too!
If any of you would like to know how that can be done, check out this CodePen snippet I wrote: http://codepen.io/AmruthPillai/pen/axvqB
Something like this:
JSFiddle Demo
HTML
<p>I am <span>Something</span><span class="hidden">Test22222</span></p>
CSS
.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}
jQuery
$(document).ready(function() {
// run the fade() function every 2 seconds
setInterval(function(){
fade();
},2000);
// toggle between fadeIn and fadeOut with 0.3s fade duration.
function fade(){
$("span").fadeToggle(300);
}
});
Note : this only works with toggling 2 words, it might be better to have an array of words, and to write a function to loop through those and apply the `fadeIn/fadeOut animation.
Edit : Here is a solution for multiple words - https://stackoverflow.com/a/2772278/2470724 it uses an array to store each word and then loops through them.
Edit 2 : Non-array solution : http://jsfiddle.net/kMBMp/ This version loops through an un-ordered list which has display:none on it
The lowest effort approach is probably to use the Morphext jQuery plug-in:
https://github.com/MrSaints/Morphext
It's powered by animate.css, so it's easy to change the animation style of the text.
If you're looking for something a bit more powerful (can specify in AND out animations; animate not just text), there's a spin-off called Morphist:
https://github.com/MrSaints/Morphist
I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.
Can anyone explain me this strange css-animation thing in Firefox (41)? If the animation is very fast (e.g. 1s) it stops when opening a window using javascript by onclick. But it does not happen when using the direct link with the href attribute. If the animation is long enough, e.g. 4s the animation play correct if a new tab is openend by javascript. Do anyone know a how to fix this?
<head><style>
.movingBox{
position:absolute;
background-color:#000;
height:100px;
width:100px;
animation: animateThis 1s 0s ease-out 1 forwards;
}
.link{
position:absolute;
height:100%;
width:100%;
}
#keyframes animateThis{
from {left:0px;}
to {left:1000px;}
}
</style></head>
<body><div class="movingBox"></div>
<a class="link" onclick="window.open('www.example.com','_blank')"></a></body>
This is my jsFiddle.
It has onHover event which changes the image. It works fine on chrome. But, doesn't work right on firefox. What to do?
This is the jQuery function:
$(document).ready(function(){$('.viewport').mouseenter(function(e) {
$(this).children('a').children('span').fadeIn(200);
}).mouseleave(function(e) {
$(this).children('a').children('span').fadeOut(200);
});});
This is how it looks in chrome:
And this is how it looks in firefox:
Also, i have tried both solutions, with jquery and pure css.
Delete all your Javascript and replace with pure CSS:
.viewport a span {
opacity:0;
transition:opacity 200ms;
-webkit-transition:opacity 200ms;
}
.viewport:hover a span {
opacity:1;
}
Updated fiddle.
does any one know how to make the slide to left effect like in the "Read it Later" app with CSS3 or JS?
onclick --> slide whole div to left and show the div under the one which slides away.
here is an video with the example: READ IT LATER
May be that's you want with css3.
CSS
.parent{
width:300px;
border:1px solid red;
height:100px;
position:relative;
}
.box{
width:40px;
height:40px;
background:green;
display:block;
z-index:0;
}
.slider{
width:300px;
background:#454545;
color:#fff;
font-weight:bold;
font-size:24px;
height:100px;
position:absolute;
top:0;
right:300px;
transition: right 1s ease;
-moz-transition: right 1s ease; /* Firefox 4 */
-webkit-transition:right 1s ease; /* Safari and Chrome */
-o-transition:right 1s ease; /* Opera */
z-index:1;
}
.box:focus + .slider,.box:active + .slider{
right:0;
}
HTML
<div class="parent">
<div class="slider">hello</div>
</div>
Check this http://jsfiddle.net/MhHx2/
UPDATED
http://jsfiddle.net/MhHx2/4/
You can achieve that effect by using a couple of standard techniques.
Create two div elements, one for the one that is going to slide out, and one for the one that is going to get revealed.
Position them using z-index. Please not that the divs have to be positioned using absolute, relative, or fixed for this to work.
You can use jQuery for the effects. I found a decent post here.
That should get you done.