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>
Related
Im coding an interactive element that turns to look towards you when you click on it. I just have an onclick event that adds a class with the animation. Unfortunately, after playing the first time the animation does not reset. I found a question asking the same thing, but it was much too advanced for me and additionally used webkit which I dont want to use for this. Is there a simple way to reset the animation?
.susanb{
background-image:url('susanb.png');
background-size:contain;
width:18%;
height:45%;
background-repeat:no-repeat;
margin-top:12%;
margin-left: 60%;
position:absolute;
}
.susanbstare{
animation-name: stare;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes stare{
0%{background-image: url('susanbstarin.png')}
99%{background-image: url('susanbstarin.png')}
100%{background-image: url('susanb.png')}
}
<div class="susanb" id="susan"><div style="width:100%;height:100%;position:absolute;" onclick="stare();"></div>
<script>
function stare(){
document.getElementById("susan").removeAttribute("class");
document.getElementById("susan").setAttribute("class", "susanb susanbstare");
}
</script>
</body>
.susanbstare {
animation: stare 2s infinite;
}
BTW in JS, this is better
document.getElementById("susan").classList.toggle("susanbstare");
instead of these 2 lines
document.getElementById("susan").removeAttribute("class");
document.getElementById("susan").setAttribute("class", "susanb susanbstare");
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've been experimenting with HTML5 for a bit, and i wanted to try to make an Image change when a mouse hovers over it. I've tried a couple of methods and none of them gave the desired effect. I've looked through multiple tutorials but they mostly explained how to add effects to the same Image, and not change it entirely.
This is the code i have now, it doesnt actually work as intended:
ul.imagetransition li img:hover {
background-image: url('Data/Images/Image 1Hover.png');
}
<section>
<ul class="imagetransition">
<li><img src="Data/Images/Image 1.png"/></li>
</ul>
</section>
In this code, the original image is previewed correctly, but when the mouse hovers over it it immediately adds a small part of the second image onto the first one. I've tried adding the transition effect code, but it didnt have any effect. I'll be doing more research regarding this, if anyone knows/understands how to get this done, please point me to the right directions! :D
Please let me know if further Information/Code is needed
Greatly appreciated,
Have a good day
Does it work for you?
HTML:
<ul>
<li id="aaa">
<img class="bottom" src="a.jpg">
<img class="top" src="b.jpg">
</li>
</ul>
CSS:
#aaa {
position:relative;
height:100px;
width:100px;
margin:0 auto;
list-style-type: none;
}
#aaa img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#aaa img.top:hover {
opacity:0;
}
From past experiences this won't work unless you use JS's getElementById and change the src of the background image. Either that or use a two in one kind of thing like
<div id="parent1">
<ul></ul>
</div>
Where if you hover over it the first one's background would have an opacity of 0 and the ul's opacity to one by using parent/child relation and activation or maybe try add !important at the end of the second background image restrictions like padding won't work coz that would only separate your images even more.
Hope this helps.
Ps: I was writing this on my phone :/ but now i edited it using my laptop
here are some examples using JS
the mouseover thing
and this is for the change image thing
i think you can piece these together finely.
HTML
<img class="bottom" src="a.jpg">
CSS
img
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
img:hover {
width: 300px;
}
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
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.