nth child animation stopped working - html

Got a weekend poser for you.
I've been working on a new site and I have a little animation in the top right of some letters fading in and out.
They're all in separate spans (the letters) and I'm using .letter:nth-child(number) for each one in the css.
It was all working great but after adding a couple of bits and bobs, suddenly, the 10th letter has stopped working.
I'm staring at the code like a muppet and I've re-written the css and gone through every line but I just can't figure out why it has stopped working.
.letter:nth-child(10) {
-webkit-animation: fade 4s
infinite 1000ms;
animation: fade 4s infinite
1000ms;
}
I have upped it to jsfiddle and it does the exact same thing there.
https://jsfiddle.net/hj15se3t/1/
Anyone have an idea as to what could be causing it?
Thanks for your time as always and for any help. As usual it'll probably turn out to be something stupid. I'm just stumped!

The problem you have is that there is an extra element before the letters. So what's happening is that :nth-child(1) is targeting <div id="pic">. You could add a new rule for :nth-child(11) or wrap all the letter in their own container to avoid any issue like this happening again in the future should you need to change the layout of the DOM.

wrap all letters in an extra div because nth-child is going to look at all the children in the parent. Your parent div still has the svg element as a child too. So nth-child(10) is actually the 9th letter and nth-child(1) targets your svg.
2 solutions possible:
Add nth-child(11) to take the 10th letter and remove nth-child(1)
wrap the letters in another div.
DEMO
https://jsfiddle.net/hj15se3t/2/

Related

Delayed transition only in certain situations

I have 4 overlays inside a container (overflow: hidden) translated horizontally 100% on default.
.active on the .overlay animates it into view.
activating another one removes .active from the current one and adds .active to the new one.
Now I want a transition delay on the "new active" element, because animating both the old and the new overlay at once results in inconsistent visuals (overlays overlaying each other etc.). And both animating simultaneously feels too hasty.
My first approach:
sibling selector to delay the transition for all siblings of the .active, didn't work out, since the sibling selector doesn't look "behind" or "around" ...
Second approach:
class on parent atLeastOneIsActive and then apply transition-delay to .active. Didn't work aswell, because both the new and the old overlay then get a transition-delay, making all even worse.
Unfortunately I can't show you the live example.
The question is more in general anyways; but to get a picture of the result here 2 screenshots
hover on either pin or link
overlay displayed
I'm looking for a clean and sweet way to apply delays in certain situations.
jQuery is only used for class management.
activating another one removes .active from the current one and adds .active to the new one.
Is this "activation" made with jQuery .on("mouseover", function(){?
Because if you add and remove classes this way, why not simply use setTimeout on the .addClass()?
-------------------------
EDIT
I worked on it a while.
And I'm pretty sure to have a solution...
Let's say I found the exact nature of you specific problem, to be more exact.
I reproduced your problem and the solution in a fiddle.
But before you have a look to it, please read my explanations:
The image transitions are overlapping.
And that is because of their width versus their animation start position.
Since they are pushed to outer right of the viewport at a specific distance...
This distance is not enought versus the with of the images. It has to be twice (minimum) the larger image.
I found it by setting them all to a same size.
This is not mandatory... But sure is a good thing!
So, the solution is to push them twice this "max-width" away from the right side of the viewport.
I made a Fiddle and made 4 buttons (representing your map pins) to animate the images. I also assigned keyboard numbers to them, so it's easyer to closely watch the images without having to target the buttons with the mouse. ;)
And finally, there is a button "Toggle class equalSize" which forces the images to all the same size.
Have a look now!
:D
.active {
right:0;
}
img{
position:fixed;
right:-1200px;
top:100px;
transition: right 2s;
}
.equalSize{
width:600px;
height:450px;
}

reverse svg animation when hover is over?

I simply want my svg lines to reverse their animation after the user stops hovering over the parent div switch executes it.
There is a fair amount of code so I just made a jsbin:
http://jsbin.com/tiwejekicu/2/edit
So my question is: how do I get it to act like any old transition and reverse itself when the hover is over. ALSO: how come when the yellow box is clicked a blue fade comes from the left edge? Any ideas?! Thanks a lot for any help!
You need to have two #keyframe rules:
#keyframe in {
from {something;}
to {to something;}
}
#keyframe out {
from {something;}
to {transform: rotate(0deg);}
}
Check out this question it's basically the same.

Rotate a div on mouse over and go on when mouse out

I have a div, which I rotate it 360 degrees with css transitions on hover style. When the mouse is out, animation stops and div returns to its original style. Is it possible to go on rotating until it complete 360 degree rotation even the mouse is out of the div ? I am looking for a pure css solution, not jscript.
Thanks for your help :)
I'm afraid there isn't a neat solution for this. There is a workaround previously posted by Robert McKee that consists in using an animation with a high delay in normal css selector.
There's the jsfiddle example with a rotation:
http://jsfiddle.net/akko82/FNKMF/
This line will do the job:
-webkit-animation:rotateAnimation 3600ms ease-in-out 6000s;
where rotateAnimation is our animation and the 6000s is the delay.

CSS3 transition delay with easing

i'm having a weird issue which i can't figure out (searching for a solution for 2 hours now).
I'm using a slider, which when slide is selected shows a caption (H3 and p). Everything works fine except opacity ease-in-out on caption elements when using transition-delay property.
In jsfiddle i've setup a demo. When clicked next or previous, the caption elements show up with a delay, but opacity easing on them doesn't work for a smooth transition. Any help appriciated :)
Now, this might just be me misunderstanding what you are trying to do, but it seems like you are incorrectly assuming inheritance of the transitions, as well as using imprecise selectors. Basically, the line #test input:checked ~ #full > .caption selects the .caption if any of the checkboxes are checked, i.e always.
In the end, you never really tell the elements to actually animate their opacity.
By rewriting your code a bit, I came up with this which should work a bit better.
As a side note, you shouldn't use duplicate ids (#full), if anything because it will break Javascript if you try to access it. Use space separated classes instead.

IE: element does not move when :hover makes another element visible

I encountered a strange problem in IE 8/7 and I have gone through hell (and back) to reach a minimal test-case that demonstrates the issue...
Consider the following bit of HTML:
<form id="hover-test">
<fieldset>
<div id="hover">
<p>always visible</p>
<p class="hidden">Visble only on hover</p>
</div>
</fieldset>
<fieldset>
Please jump
</fieldset>
</form>
And this bit of CSS:
form { background-color:#f5f5f5; }
.hidden { display:none; }
#hover:hover .hidden { display:block; }
#link { position:relative; }
What it should do: On hover an additional paragraph becomes visible, pushing the next fieldset and all its contents down. (works fine in FF/Chrome/Safari/Opera)
What it does in IE 7/8: The paragraph becomes visible, pushing down the following fieldset. The link however stays fixed in place for reasons I can't fathom.
In the frustrating chase for a minimal mark-up that reproduces the problem (the effect vanished when I removed single lines of CSS from the original code, but my testcase could have them and still be fine... O_o) I identified at least three players working together here:
the fieldset: If I put everything in divs or in a form without fieldsets, all is well
the position:relative: Uncomment that line and voilá - link jumps.
the background color: This makes no sense whatsoever to me, but without this it works.
So, here's the question (apart from the implied "WTF?"):
Has anybody any clue on what is causing this behavior? And how to solve it? Or at least a hint into which of the many known IE issues I could look into to further test stuff?
Maybe I could come up with a way to bend the structure and...say... have the background-color on some additional wrapper div or something, but this seems... somewhat silly, and anyway, I feel as if not understanding this now will make things possibly very complicated down the road.
It was your comment about the position: relative that helped me solve it. That flagged me to think hasLayout! The issue seems resolved if you make sure both form and fieldset have layout set also (just giving it to the #link created the issue). One (among many) ways:
form, fieldset {zoom: 1}
See the working fiddle.
BTW: You should not have two #hover id's in your code. That should be set to a class (maybe it is just an error in your example, but I wanted to note it).