reverse svg animation when hover is over? - html

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.

Related

CSS3 Flag/wave movement with text inside

So I'm working on a project that requires me to make an animated flag purely with HTML5 and CSS3—looking something like this, and with this kind of movement.
I know there exist some solutions with HTML canvas, but my client specifically requested this be done with CSS3 (and as little javascript as possible). For the waving effect, the only solution I found was to create several div elements and have each with an animation delay on the translateY to create the flag effect all together (JSFiddle here) and do the exact same thing for the text.
I can also make the text overlap the flag by making the text have an absolute position, but my problem is I'm not sure how I can coordinate the wave movement of the text with the flag's so it can be exactly the same. Or, alternatively, if there's another way to do this animation (not sure yet how I'm going to work around the triangles at the edges)? I know an image can be used to animate over it; what would be more efficient in this case?
We can do the animation in CSS3 using Keyframes.
You have to have the transparent image which will have the set of frames(all frames in single image) and animate using keyframes.
Here is one Example like that - https://codepen.io/Guilh/pen/yldGp
HTML
<div class="monster"></div>
CSS
body {
background: #24aecd;
}
.monster {
width: 190px;
height: 240px;
margin: 2% auto;
background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
animation: play .8s steps(10) infinite;
}
#keyframes play {
100% { background-position: -1900px; }
}
I hope this will help you

nth child animation stopped working

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/

Is it possible to toggle or reverse the direction of a css animation?

As an example, lets say I have a wash that I want to go across a container when a user does something and reverse when they do it again, something like:
#keyframes wash{
0%{clip-path: circle(0% at bottom left);}
100%{clip-path: circle(150% at bottom left);}
}
#keyframes wash-reverse{
0%{clip-path: circle(150% at bottom left);}
1000%{clip-path: circle(0% at bottom left);}
}
.container.opening{
animation : wash;
}
.container.closing{
animation : wash-reverse;
}
If I want the container to start unaffected by the wash then I want to apply the "wash" to the container (using the opening css class) and then remove it (with the closing css class) is it possible to define a single animation and have a separate CSS rule that says "play the animation backwards"?
I've tried the animation-direction : reverse but I can't get it to work.
A JS fiddle of a working (Chrome only) example where you click on the 'toggle' button to add and remove the wash, completed by defining both animations distinctly, is here:
http://jsfiddle.net/errumm/c7ojz7r6/1/
Try to change the solution by using translation instead of key-frames.
Config a translation on 'clip-path'. Change the logic of toggle button to add/remove 'in' class.
.adl-modal{
-webkit-clip-path: circle(0 at bottom left);
}
.adl-modal.in{
-webkit-clip-path: circle(150% at bottom left);
}

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.

how do I get this effect?

http://www.apple.com/why-mac/
has a cool little thing where you hover your cursor over the image and it scrolls upward to show hidden text.
I'm wanting to create a mockup with that same effect, where I have the mockup as one flat background image and then place the scrolling images on top of it.
Any ideas as to how I can do this?
You can do this with jQuery scrollable: http://flowplayer.org/tools/scrollable/
Looking into the source for the page (with Firefox/Firebug, by the way, which is awesome for this kind of reverse-engineering) I see that the javascript framework Scriptaculous is in use. Specifically, the BlindUp animation appears to be the one in use on that page.
Apple uses Scritaculous for that effect.
CSS Transitions?
(From the link above):
Transitions are specified using the following properties:
transition-property – What property should animate, e.g., opacity.
transition-duration – How long the transition should last.
transition-timing-function – The timing function for the transition
(e.g., linear vs. ease-in vs. a custom cubic bezier function).
transition – A shorthand for all three properties.
Here is a simple example:
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}