CODEWITHSUNDEEP
htmlcssanimation
tehchriis
tehchriis

Reputation: 61

CSS3 animation starts too fast

I made 3 divs fade over into eachother, each lasting 7 seconds, so in total 21s.

div 2 has a delay of -7s, div3 has -14s.

Upon entering the website the first div scoots by in less than 7 seconds and when that one fades out everything works like it should, this gives me some problems when trying to animate other things together with that div. Like the frontend developer '' svg doesn't look properly and the timer circle below is 3.5 seconds behind.

How do I get the animations to start with the 7s timer like it should?

EDIT: made a codepen; apparently it starts with the third div, and then it starts with div 1. You can see it lasts a few seconds, and then it moves to div 1 and from then on every div has a 7s delay. it's only the first time it fails.

Codepen: https://codepen.io/anon/pen/MKOGJZ

CSS

.fade-in{
    opacity:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 21s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 21s;
}

.fade-in-2{
    opacity:0;
    -webkit-animation-name: fade2;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 21s;
    animation-name: fade2;
    animation-iteration-count: infinite;
    animation-duration: 21s;
}

.fade-in-3{
    opacity:1;
    -webkit-animation-name: fade3;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 21s;
    animation-name: fade3;
    animation-iteration-count: infinite;
    animation-duration: 21s;
}

.fade-in-2 img, .fade-in-2 svg{
    margin-top:-8em;
    max-width:100%;
    height:auto;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    17% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    47% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    17% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    47% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}

@-webkit-keyframes fade2 {
    0% {opacity: 0;}
    15% {opacity: 0;}
    17% {opacity: 1;}
    33% {opacity: 1;}
    45% {opacity: 1;}
    48% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes fade2 {
   0% {opacity: 0;}
    15% {opacity: 0;}
    17% {opacity: 1;}
    33% {opacity: 1;}
    45% {opacity: 1;}
    48% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 .fade-in {
}
#f2 .fade-in, #f2 .fade-in-2{
    -webkit-animation-delay: -14s;
}
#f3 .fade-in, #f3 .fade-in-2{
    -webkit-animation-delay: -7s;
}

.frontend-left, .frontend-right, .frontend-dash{
    stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 7s cubic-bezier(.1, .85, .15, .5) infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.timeline{
      stroke-dasharray: 607;
      stroke-dashoffset: 607;
  animation: dash3 21s linear infinite;
}

@keyframes dash3 {
  to {
    stroke-dashoffset: 0;
  }
}

HTML

<div class="content-container service-wrapper">
    <div id="f1" class="service-section">
        <div class="col eentweede fade-in">
            <h2>Div 1</h2>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet             rutrum faucibus dolor auctor.</p>
        </div>       
        <div class="col eentweede img-here fade-in-2">
        </div>
    </div>
    <div id="f2" class="service-section">
        <div class="col eentweede fade-in">
            <h2>Div 2</h2>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        </div>
        <div class="col eentweede img-here fade-in-2">
        </div>
        </div>
    <div id="f3" class="service-section">
        <div class="col eentweede fade-in" style="text-align:right;">
            <h2>Div 3</h2>
            <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. 
            </p>
        </div>
        <div class="col eentweede img-here fade-in-2">
        </div>
    </div>
</div>

Upvotes: 1

Views: 3123

Answers (2)

factordog
factordog

Reputation: 597

I would have just used the delay property in CSS:

animation-delay: 2s;

You can check out more on animation delays

http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

That way you dont need so many keyframes and you can delay it to the time you want.

Upvotes: 2

Cruiser
Cruiser

Reputation: 1616

The problem lies with your keyframe percentages. You're only viewing the animation for about 20% of it's total duration, the rest of the time it's opacity is 0. Adjust those and make your delay positive and you should see better results.

try this for your keyframes:

0% {opacity: 0;}
17% {opacity: 1;}
20% {opacity: 1;}
33% {opacity: 1;}
47% {opacity: 1;}
50% {opacity: 1;}
98% {opacity: 1}
100% {opacity: 0;}

Upvotes: 2

Related Questions