CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
JSArrakis
JSArrakis

Reputation: 799

What is the proper transitionend (or animationend) that I need to apply?

Okay Im mostly unsure how to use transitionend (or if Im supposed to use animationend in this case). Im unsure if Im supposed to use var, node or box. Pretty much Im a complete novice in this case.

Im trying to make it so my div animates a opacity transition for 1 iteration after a short delay from 0% opacity to 100% opactiy to 5% opacity. Then the second animation I want to delay to play just after the first animation is done and then do a lesser opacity shift for infinite iterations.

Heres the .css

.container{
    position: absolute;
    width: 224px;
    height: 220px;
    background-color: black;
}
.centerhex{
    background-image:url(http://i.imgur.com/4sZDtfK.png);
    height:224px;
    width:210px;
    position:absolute;
}
.done{
    animation-delay:0.5s;
    -webkit-animation-delay:0.5s;
}
.transtart{
    opacity:0
}
.fadein{    
    animation:fadein 0.65s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -webkit-animation:fadein 0.65s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode: forwards;
}
.pulse{ 
    animation:fadein 4s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-iteration-count:infinite;
    animation-delay:1s
    -webkit-animation-delay:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation:fadein 4s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes fadein { 
    0%{opacity:0;}
    40%{opacity:1;}
    50%{opacity:1;}
    100%{opacity:0.05;} 
}
@keyframes fadein {
    0%{opacity:0;}
    40%{opacity:1;}
    50%{opacity:1;}
    100%{opacity:0.05;} 
}
@-webkit-keyframes pulse { 
    0%{opacity:0.05;}
    10%{opacity:0.1;}
    13%{opacity:0.1;}
    100%{opacity:0.05;} 
}
@keyframes pulse {
    0%{opacity:0.05;}
    10%{opacity:0.1;}
    13%{opacity:0.1;}
    100%{opacity:0.05;} 
}

Heres the HTML

<div class="container">
    <div class="centerhex fadein transtart done"></div>
</div>

I put a demo here: http://jsfiddle.net/2yLqj/

In my demo the "fadein" animation is the first animation, and the "pulse" animation is the second animation I want to attach. I did not add the pulse animation to the div because it breaks the intended effect.

I would greatly appreciate any help! Thanks!

Upvotes: 3

Views: 1855

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 26014

It would be easiest to just use a setInterval, CSS transitions, and an if statement instead of mixing animations with javascript. Hopefully it's self explanatory

The only real CSS you need is transition:opacity 2s ease-in-out; on whatever class you're changing the opacity of. Here is the javascript

var origFadeVal = .05,
    newFadeVal = origFadeVal,
    fadeDepreciation = .9,
    fades = document.getElementsByClassName("fadein");

var animateOpacity = setInterval(function() {
    for(var i = 0; i < fades.length; i++) {
        if(fades[i].style.opacity == 1) {
            fades[i].style.opacity = newFadeVal;
            newFadeVal *= fadeDepreciation;
        }
        else {
            fades[i].style.opacity = 1;
        }
    }
    if(newFadeVal <= .005) {
        clearInterval(animateOpacity);
    }
}, 2000);

Demo

If you are looking to have an individual interval timing for each element of the class, you can use HTML5's data-attribute. Here's a great article on the subject for reference

In your case that'd mean creating a function that runs the setInterval for each element so you can use local variables. Again, the code should be fairly self explanatory but let me know if you have any questions

var origFadeVal = .05,    
    fadeDepreciation = .9,
    fades = document.getElementsByClassName("fadein");

for(var i = 0; i < fades.length; i++) {
    startInterval(fades[i]);
}
function startInterval(elem) {
    // Turn seconds into milliseconds using *1000, divide by 2 because we want it to run twice
    var intervalTiming = elem.dataset.intervalTiming * 500,
        /* Alternate form /* intervalTiming = elem.getAttribute('data-interval-timing') * 500, */
        newFadeVal = origFadeVal;
    elem.style.transitionDuration = intervalTiming;

    var animateOpacity = setInterval(function() {
        if(elem.style.opacity == 1) {
            elem.style.opacity = newFadeVal;
            newFadeVal *= fadeDepreciation;
        }
        else {
            elem.style.opacity = 1;
        }
        if(newFadeVal <= .005) {
            clearInterval(animateOpacity);
        }
    }, intervalTiming);
}

Demo with individual intervals

If you want an individual delay on the other hand, you can use a similar approach but use a setTimeout

Demo with individual delays and timings (Fun one)

If you just want the delay and all the same timings, I made a demo for that too:

Demo with individual delays

Hope this suits your needs!

Upvotes: 1

Related Questions