Jumping dots animation - javascript

So let's say I have three dots as spans inside a parent element.
I need to create a parent hover animation that will make the dots jump one by one with delay. I accomplished this without hover but I need the animation to work when I hover the parent element. At the moment when I hover the parent element no delay is applied to the children.
.dots-cont {
position: absolute;
right: 0px;
bottom: 0px;
}
.dot {
width: 12px;
height: 12px;
background: #22303e;
display: inline-block;
border-radius: 50%;
right: 0px;
bottom: 0px;
margin: 0px 2.5px;
position: relative;
}
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation: jump 1s infinite;
}
.dots-cont .dot-1{
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.dots-cont .dot-2{
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.dots-cont .dot-3{
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
#keyframes jump {
0% {bottom: 0px;}
20% {bottom: 5px;}
40% {bottom: 0px;}
}
<span class="dots-cont">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
</span>


You just need to add the animation property to .dot base instead of the :hover version. This way, you will get the same behavior no matter what. You can add any properties you want to the hover class, like changing the color.
.dots {
animation: jump 1s infinite;
}
https://jsfiddle.net/3gampq0b/5/
EDIT: To prevent animation on dot hover.
.dots-cont:hover > .dot {
animation: none;
}
https://jsfiddle.net/3gampq0b/6/
EDIT: Only animate on parent hover.
You can also add padding to the .dots-cont so the hover surface area is greater.
.dots-cont:hover > * {
animation: jump 1s infinite;
}
https://jsfiddle.net/3gampq0b/7/


By Using "animation: jump 1s infinite;" directly, you are overriding the animation-delay property for .dot elements.
Try Below snippet, see if this is what you are trying to do:
.dots-cont{
position: absolute;
left: 100px;
top: 100px;
}
.dot{
width: 12px;
height: 12px;
background: #22303e;
display: inline-block;
border-radius: 50%;
right: 0px;
bottom: 0px;
margin: 0px 2.5px;
position: relative;
}
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation-name: jump;
animation-duration: .3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease;
}
.dots-cont .dot-1{
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.dots-cont .dot-2{
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.dots-cont .dot-3{
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
#keyframes jump {
from {bottom: 0px}
to {bottom: 20px}
}
#-webkit-keyframes jump {
from {bottom: 0px}
to {bottom: 10px}
}
<span class="dots-cont">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
</span>


I changed
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation: jump 1s infinite;
}
to
.anim .dot {...}
Then i add and remove anim class with jQuery.

Related

Multiple CSS animations: How to avoid re-triggering one of them?

I am trying to build an animated menu for mobile apps similar to Pinterest's radial menu. I have managed to get the behaviour to where I want it except for one minor detail: when the menu opens, the items shoot out as I want them to, and when you hover on them, they transform as I want them to. problem is, after the cursor leaves the items, they re-trigger their original animation, instead of just returning to their previous state. I realise this is a problem to do with the class being used for the animation and I have tried a number of solutions, including deleting the class and adding a new one .onmouseover() and changing animation running state on hover/mousover. I am probably missing something simple and idiotic, but I just cannot see it. can anybody help?
The following code is just the way I had it before trying to implement solutions.
HTML:
<!--Footer-->
<div class="footer">
<!--RADIAL NAV MENU-->
<div id="navContainer">
<!--Buttons-->
<div id="workouts" class="sml smlOne">Go there</div>
<div id="home" class="sml smlTwo">Go here</div>
<div id="profile" class="sml smlThree">Go somewhere</div>
<!--Burger-->
<div class="burger-menu">
<div id="top" class="bar barTop"></div>
<div id="middle" class="bar barMid"></div>
<div id="bottom" class="bar barBot"></div>
</div>
</div>
</div>
CSS:
.footer
{
position: fixed;
bottom: 0%;
width: 100%;
height: 50px;
background-color: #d36363;
box-shadow: 0px -6px 6px #888888;
z-index: +2;
}
/* Burger menu section */
#navContainer
{
text-align: center;
font-size: 10px;
}
.burger-menu
{
position: relative;
margin: auto;
height: 100%;
width: 50px;
}
.bar
{
height: 6px;
width: 100%;
background-color: white;
}
#top
{
position: relative;
top: 5px;
}
#middle
{
position: relative;
top: 15px;
}
#bottom
{
position: relative;
top: 25px;
}
.barTop, .barMid, .barBot
{
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.barTopOn
{
transform: rotate(45deg) translateY(12px) translateX(11px);
}
.barMidOn
{
opacity: 0;
}
.barBotOn
{
transform: rotate(-45deg) translateY(-12px) translateX(11px);
}
/* Navigation buttons section */
#navContainer
{
position: relative;
margin: auto;
width: 50px;
}
.sml
{
border: 2px solid #58a7dd;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: white;
box-shadow: 6px 6px 6px #888888;
transform: scale(0);
}
#workouts
{
position: absolute;
bottom: 10px;
left: -60px;
}
#home
{
position: absolute;
bottom: 50px;
}
#profile
{
position: absolute;
bottom: 10px;
left: 60px;
}
.smlOnOne
{
animation: pop, slideOne 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnTwo
{
animation: pop, slideTwo 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnThree
{
animation: pop, slideThree 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnOne:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopL 0.2s;
animation-fill-mode: forwards;
}
.smlOnTwo:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopC 0.2s;
animation-fill-mode: forwards;
}
.smlOnThree:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopR 0.2s;
animation-fill-mode: forwards;
}
#keyframes pop
{
100%
{
transform: scale(1,1);
}
}
#keyframes slideOne
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: -60px;
}
}
#keyframes slideTwo
{
0%
{
bottom: -20px;
}
100%
{
bottom: 50px;
}
}
#keyframes slideThree
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: 60px;
}
}
#keyframes whopL
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(-10px);
}
}
#keyframes whopC
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px);
}
}
#keyframes whopR
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(10px);
}
}
JS/jQuery:
$(".burger-menu").click(function()
{
$(".barTop").toggleClass("barTopOn");
$(".barMid").toggleClass("barMidOn");
$(".barBot").toggleClass("barBotOn");
$(".smlOne").toggleClass("smlOnOne");
$(".smlTwo").toggleClass("smlOnTwo");
$(".smlThree").toggleClass("smlOnThree");
});
Here is a working demo:
https://codepen.io/BGGrieco/pen/NgjxXq

You have an element that is a set of #-webkit-keyframes to animate in. On hamburger-menu click, these keyframes run, and that works well.
Next, you have a second set of #-webkit-keyframes on hover, so on hover works well too.
However, the instant the mouse is away from the element, the first (intro) set of keyframes gets run again. You don't want it to run after it first runs.
Here is what I was able to accomplish:
https://codepen.io/CapySloth/pen/RgxKEb
<div id="workouts" class="sml smlOne">
<div class="test1">
Go there
</div>
</div>
Instead of stacking classes which contain keyframe animations onto the one ".sml" class, I have split the task between two elements. ".sml" now acts as a wrapper which takes care of the "hamburger-menu open" animation and "test1 a" takes care of the "whop" animation.
If you can find a way to hide/show parents of the "test1 a/test2 a/test3 a" then you will have what you want.

You can use .stop() before your .toggleClass.
$("#example").stop().toggleClass("class");

prevent effect hover from occurring until previous effect has completed

Currently if I hover over an element it displays the animation I am looking for, and hides the other elements on the page.
The issue I am facing is that if I hover over many of the divs quickly it queues, and hides the divs one after an other. I want to just allow one div to be hidden when hovered on, and when all animations are complete allow the functionality work again.
See jsfiddle here
If you hover quickly over the divs you will see that they appear/disappear and this keeps repeating. I want more control over this, and to only allow the effect to happen again, once the animation is complete.
Please also see code below for convenience.
I tried adding
if(!$(".wrapper").is(":animated")){....
but unfortunately this didn't work.
html
<div class="box-1">
<div class="wrapper">
<div class="background-out label-1 label"></div>
<div class="background-over label-1 label"></div>
<div class="background-info">
<div class="text">Bla bla bla.</div>
</div>
</div>
</div>
<div class="box-2">
<div class="wrapper">
<div class="background-out label-2 label"></div>
<div class="background-over label-2 label"></div>
<div class="background-info">
<div class="text">Bla bla bla</div>
</div>
</div>
</div>
css
.box-1 {
position: absolute;
top: 40%;
left: 40%;
}
.box-2 {
position: absolute;
top: 10%;
left: 40%;
}
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 0 0 20px;
}
.background-out,
.background-over {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.background-out,
.background-over,
.background-info {
transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
}
.background-info {
position: absolute;
left: 100px;
top: 0;
width: 100%;
height: 100%;
opacity: 0.2;
transform-origin: 0% 50% 0px;
transform: rotateY(-90deg);
background-color: #f8f8f8;
}
.background-info .text {
font-size: 12px;
letter-spacing: 1px;
text-align: center;
width: 80%;
margin-left: 10%;
margin-top: 5px;
}
.background-out {
transition-timing-function: linear;
}
.wrapper:hover .background-out {
visibility: hidden;
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
transform: translate3d(0px, 0px, 0px) rotateY(0deg);
transition: opacity 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
opacity: 1;
}
.background-over {
background-color: transparent;
opacity: 0;
transform-origin: 100% 50% 0px;
transform: rotateY(-90deg);
}
.label-1 {
background: yellow;
}
.label-2 {
background: pink;
;
}
.label {
animation-duration: 1s;
animation-name: slidein;
}
JS
$('.wrapper').hover(function() {
$('.wrapper').not(this).fadeOut('slow');
$('.wrapper .label').not(this).removeClass('label');
}, function() {
$('.wrapper').not(this).fadeIn('slow');
});

You need to use the jQuery .stop() method to prevent the animations queuing.
https://jsfiddle.net/po34gv6v/11/
$('.wrapper').hover(function() {
$('.wrapper').not(this).stop().fadeOut('slow');
$('.wrapper .label').not(this).removeClass('label');
}, function() {
$('.wrapper').not(this).stop().fadeIn('slow');
});
see: https://api.jquery.com/stop/

Looking to achieve rectangle radial wipe animation reveal

I'm working on a full-width hero animation that would reveal an image/HTML div in a radial wipe manner. Here's what I have thus far: http://jsfiddle.net/andrewkerr/bjqSv/ - (code below) which is largely based these pieces:http://codepen.io/tmyg/pen/bwLom and http://css-tricks.com/css-pie-timer/ - The issue I'm running into is the fact that the image tiles because the animation splits the "pie" in half - I'm looking to perform the effect without having the image tile. I'm not opposed to a Javascript solution. Thanks.
//html
<div class="spinner-new">
<span><em></em></span>
<span><em></em></span>
</div>
//css
.spinner-new {
width: 100%;
height: 400px;
margin: 0 auto;
position: relative;
background:#3f9e35;
overflow:hidden
}
.spinner-new span em {
background-image:url('http://cdn.acidcow.com/pics/20100707/funny_family_photos_04.jpg');
-webkit-animation-delay:1s;
-webkit-animation-duration: 3s;
}
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(180deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(180deg); }
}
.spinner-new {
position: relative;
}
.spinner-new span {
width: 50%;
height: 400%;
overflow: hidden;
position: absolute;
}
.spinner-new span:first-child {
left: 0;
}
.spinner-new span:last-child {
left: 50%;
}
.spinner-new span em {
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spinner-new span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 12.5%;
}
.spinner-new span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 12.5%;
}

That is my solution.
CSS
#-webkit-keyframes span-left {
0% { right: 0%; }
24.999% { right: 0%;}
25% { right: 50%;}
100% { right: 50%;}
}
#-webkit-keyframes rotate-first {
0% { right: 100%;
-webkit-transform: rotate(0deg);
-webkit-transform-origin: right center; }
24.999% { right: 100%;
-webkit-transform: rotate(180deg);
-webkit-transform-origin: right center; }
25% { right: 0%;
-webkit-transform: rotate(180deg);
-webkit-transform-origin: right center; }
50% { right: 0%;
-webkit-transform: rotate(360deg);
-webkit-transform-origin: right center; }
100% { right: 0%;
-webkit-transform: rotate(360deg);
-webkit-transform-origin: right center; }
}
#-webkit-keyframes rotate-last {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
24.999% { -webkit-transform: rotate(180deg); opacity: 0;}
25% { -webkit-transform: rotate(180deg); opacity: 1;}
50% { -webkit-transform: rotate(360deg); opacity: 1; }
100% { -webkit-transform: rotate(360deg); opacity: 1;}
}
.spinner-new {
width: 400px;
height: 300px;
position: relative;
overflow:hidden;
position: relative;
left: 50px;
top: 20px;
}
.spinner-new span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner-new span:first-child {
right: 50%;
}
.spinner-new span:last-child {
left: 50%;
}
.spinner-new span em {
position: absolute;
width: 100%;
height: 100%;
}
.spinner-new span em,
.spinner-new span:first-child {
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner-new span:first-child {
-webkit-animation-name: span-left;
}
.spinner-new span:first-child em {
-webkit-animation-name: rotate-first;
overflow: hidden;
}
.spinner-new span:last-child em {
left: 0;
-webkit-animation-name: rotate-last;
-webkit-transform-origin: left center;
-webkit-transform: rotate(204deg);
}
.spinner-new span em:after {
content: "";
position: absolute;
width: 200%;
height: 100%;
top: 0px;
background-image:url('image.jpg');
background-size: cover;
}
.spinner-new span:first-child em:after {
left: 0px;
}
.spinner-new span:last-child em:after {
right: 0px;
}
The most complex issue is reusing the splitted left element for the right hand beginning.
I have to move the container to the left in the middle of the animation.
The background image is set with cover, and all the size are in percentages, so this solution should be fully responsive
fiddle
The demo has the iteration count to infinite, so it is easier to see it going on.

May not be the most elegant way to accomplish this, but I ended up using CSS animations to reveal pie pieces gradually. Here's a link to the working example: http://jsfiddle.net/andrewkerr/dsTm6/ - code below
//html
<div class="wrapper">
<div class="headline">Some really cool supporting text</div>
<div class='shutter-1 first' style="left:400px;top:0px;"></div>
<div class='shutter-2 fourth' style="left:400px;top:400px;"></div>
<div class='shutter-1a third' style="left:400px;top:400px;"></div>
<div class='shutter-3 seventh' style="left:0px;top:0px"></div>
<div class='shutter second' style="left:400px;top:0px;"></div>
<div class='shutter-2a sixth' style="left:0px;top:400px;"></div>
<div class='shutter fifth' style="left:0px;top:400px;"></div>
<div class='shutter-3a eighth' style="left:0px;top:0px"></div>
</div>
//css
.wrapper {
position:relative;
background-image:url('main.jpg');
width:800px;
height:800px;
margin:0px auto;
}
.shutter
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-bottom: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-1
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-1a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-2
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-bottom: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-2a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-3
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-top;150px solid transparent;
border-left: 400px solid #e7e7e7;
text-indent: -9999px;
border-top-width: 400px;
border-top-style: solid;
border-top-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-3a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
#keyframes first
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
#-moz-keyframes first /* Firefox */
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
#-webkit-keyframes first /* Safari and Chrome */
{
from {opacity: 1.0 ;}
to {opacity: 0.0;}
}
#-o-keyframes first /* Opera */
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
.first
{
animation: first 1s;
animation-delay: .08s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: .08s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: .08s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: .08s;
-o-animation-fill-mode: forwards;
}
.second
{
animation: first 1s;
animation-delay: 1.0s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1s;
-o-animation-fill-mode: forwards;
}
.third
{
animation: first 1s;
animation-delay: 1.05s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.05s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.05s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.05s;
-o-animation-fill-mode: forwards;
}
.fourth
{
animation: first 1s;
animation-delay: 1.2s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.2s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay:1.2s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.2s;
-o-animation-fill-mode: forwards;
}
.fifth
{
animation: first 1s;
animation-delay: 1.4s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.4s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.4s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.4s;
-o-animation-fill-mode: forwards;
}
.sixth
{
animation: first 1s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.5s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.5s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.5s;
-o-animation-fill-mode: forwards;
}
.seventh
{
animation: first 1s;
animation-delay: 1.6s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.6s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.6s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.6s;
-o-animation-fill-mode: forwards;
}
.eighth
{
animation: first 2s;
animation-delay: 1.7s;
animation-fill-mode: forwards;
-moz-animation: first 2s; /* Firefox */
-moz-animation-delay: 1.7s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.7s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 2s; /* Opera */
-o-animation-delay: 1.7s;
-o-animation-fill-mode: forwards;
}
.headline {
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size:36px;
text-align: center;
color:#fff;
padding-top:300px;
width:300px;
margin: 0 auto;
}

CSS3 animation begin when hovering over a different element?

I have a navigation bar that I'm trying to get two links to animate in from off-page and end next to my other links when I hover over one of the links in my list.
Current navigation links:
<div class="links">
<ul>
<li>
link 1
</li>
<li>
link 2
</li>
<li>
link 3
</li>
</ul>
</div>
and the css for .links:
.links ul {
white-space: nowrap;
list-style-type: none;
position: fixed;
top: 8px;
left: 60%;
z-index: 4;
width: auto;
height: 67px;
}
.links li {
white-space: nowrap;
display: inline-block;
margin-right: 30px;
z-index: 4;
height: 40px;
}
And here's the relevant css, along with the animation that I have currently that works properly:
.extralinks {
position: fixed;
top: 8px;
left: 90%;
animation-name: slidey;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running;
/* Safari and Chrome */
-webkit-animation-name: slidey;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
z-index: 4;
}
#keyframes slidey {
0% {left: 90%; top: 8px;}
100% {left: 40%; top: 8px;}
}
#-webkit-keyframes slidey /* Safari and Chrome */ {
0% {left: 90%; top: 8px;}
100% {left: 40%; top: 8px;}
}
.links li:nth-child(3) {
background-color: Red;
}
markup for .extralinks
<div class="extralinks">
<ul>
<li>
link 4
</li>
<li>
link 5
</li>
</ul>
</div>
I need to make it so that when someone hovers over "link 3" the animated links slide in from the right and end next to my links. I'm not quite sure how exactly to link the animation to "link 3" in my list. Any help? I would not be opposed to using javascript/jquery, I'm just not well-versed in either.
Thank you!

I'm not exactly clear of your goals, but I made some assumptions and slapped a jsFiddle together. I used css transitions instead because I assumed it was a :hover animation and this allowed the sub menu to return to it's position.
* {
padding:0;
margin:0;
}
.links {
width:100%;
}
.links > menu {
width:100%;
text-align:center;
}
.links menu li {
display: inline-block;
position:relative;
padding:0.75em 1em;
}
.l3 .extralinks {
position:absolute;
top:2em;
left:100%;
z-index: 4;
-webkit-transition:all 1s ease-in-out 0s;
-moz-transition:all 1s ease-in-out 0s;
-o-transition:all 1s ease-in-out 0s;
-ms-transition:all 1s ease-in-out 0s;
transition:all 1s ease-in-out 0s;
}
.l3:hover .extralinks {
left:0;
}
.l3:hover .extralinks li {
display:block;
}
.links li:nth-child(3) {
background-color: Red;
}
<div class="links">
<menu>
<li>
link 1
</li>
<li>
link 2
</li>
<li class="l3">
link 3
<menu class="extralinks">
<li>
link 4
</li>
<li>
link 5
</li>
</menu>
</li>
</menu>
</div>

modernizr CSS3 Animation fallback to swf

At the current time, i have a rather nice CSS3 animation, however i am required to provide a fallback option for browsers that do not support CSS3 animations (IE8 being the target)
I am required to use modernizr to make thinks easier, however i'm unsure of how to go about checking if the browser supports CSS animations, if it does, great, carry on, if not, display a flash version in the form of a swf instead.
CSS Below(Warning: theres alot!):
#animation
{
margin-left: auto;
margin-right: auto;
width: 700px;
height: 400px;
background:url('Images/Animation/SkyBG.png');
}
#rain
{
width: 700px;
height: 300px;
position: absolute;
background: url('Images/Animation/RainDrop.png');
-webkit-animation-name: rain;
-webkit-animation-duration: 7s;
-webkit-animation-delay: 9s;
opacity:0;
}
#-webkit-keyframes rain {
0% {background-position: 0px 0px; opacity:0;}
50%{opacity: 1;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; opacity: 0;}
}
#soil
{
width: 700px;
height: 150px;
background:url('Images/Animation/BGGround.png') no-repeat;
position: absolute;
top: 750px;
z-index: 5;
}
#items
{
width:700px;
height: 400px;
top:623px;
position: absolute;
}
#Seed1
{
float:left;
width: 60px;
height: 110px;
background:url('Images/Animation/Seed.png');
background-repeat: no-repeat;
background-size: 25px 50px;
margin-left: 50px;
margin-top: 140px;
}
#Seed2
{
float:left;
width: 60px;
height: 110px;
background:url('Images/Animation/Seed2.png');
background-repeat: no-repeat;
background-size: 40px 55px;
margin-left: 50px;
margin-top: 140px;
}
#Seed3
{
float:left;
width: 60px;
height: 140px;
background:url('Images/Animation/Seed3.png');
background-repeat: no-repeat;
background-size: 65px 80px;
margin-left: 50px;
margin-top: 125px;
}
#Seed4
{
float:left;
width: 100px;
height: 170px;
background:url('Images/Animation/Seed4.png');
background-repeat: no-repeat;
background-size: 125px 225px;
margin-left: 50px;
margin-top: 50px;
}
#Seed5
{
float:left;
width: 100px;
height: 225px;
background:url('Images/Animation/Seed5.png');
background-repeat: no-repeat;
background-size: 125px 225px;
margin-left: 50px;
margin-top: 20px;
}
#sun {
width: 12.5px;
height: 12.5px;
border-radius: 50px;
background: red;
position: absolute;
-webkit-animation: rise 10s linear 3s 1 normal both;
-webkit-animation-delay: 21s;
-moz-animation: rise 10s linear 3s 1 normal both;
-ms-animation: rise 10s linear 3s 1 normal both;
-o-animation: rise 10s linear 3s 1 normal both;
animation: rise 10s linear 3s 1 normal both;
z-index: 0;
}
#-webkit-keyframes rise {
0% {
width: 12.5px;
height: 12.5px;
left: 0%;
top: 50%;
border-radius: 50px;
background-color: rgba(255,0,0,1);
box-shadow: 0px 0px 1px 1px rgba(255,255,0,1);
}
100% {
width: 25px;
height: 25px;
left: 80%;
top: -20%;
border-radius: 75px;
background-color: rgba(255,255,0,1);
box-shadow: 0px 0px 45px 45px rgba(255,255,0,0.7);
}
}
#-webkit-keyframes show
{
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes infoboxshow
{
0% {opacity:0;}
50%{opacity:1;}
}
#Seed1
{
-webkit-animation-name: show;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 5;
position:absolute;
opacity:0;
}
#infoBox1
{
width: 400px;
height: 40px;
background:#f5cf26;
position: absolute;
bottom: 475px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align: center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed2
{
z-index: 15;
position:absolute;
left: 125px;
opacity:0;
-webkit-animation-name: show;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 8s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#infoBox2
{
width: 400px;
height: 40px;
background:#f5cf26;
position: absolute;
bottom: 475px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align: center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 8s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed3
{
-webkit-animation-name: show;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 16s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 15;
position:absolute;
left: 250px;
opacity:0;
}
#infoBox3
{
width: 400px;
height: 100px;
background:#f5cf26;
position: absolute;
bottom: 425px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align:center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 16s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed4
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 24s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 15;
position:absolute;
left: 350px;
opacity:0;
}
#infoBox4
{
width: 400px;
height: 70px;
background:#f5cf26;
position: absolute;
bottom: 450px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align:center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 7s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 24s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed5
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 31s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 15;
position:absolute;
left: 500px;
opacity:0;
}
#infoBox5
{
width: 400px;
height: 100px;
background:#f5cf26;
position: absolute;
bottom: 425px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align:center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 31s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}

Modernizr would be easier. Just use Modernizr.cssanimations.
Exemplar:
<!-- ET CETERA -->
<head>
<!-- ET CETERA -->
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script>
if (!Modernizr.cssanimations) {
/* use jQuery to replace CSS3 animations with SWF
you may want to use JavaScript, but jQuery is just easy for me
*/
}
</script>
</head>
<!-- ... -->
For cleaner aspect, in the if statement, use jQuery to append the for a different stylesheet, e.g.:
$('head').append('<link rel="stylesheet" type="text/css" href="ie8-alternative.css">');

Categories

Resources