CODEWITHSUNDEEP
htmlcssanimationcss-animations
Chris Ha
Chris Ha

Reputation: 311

CSS animation starts after certain amount of time

I have been trying to figure this out for some time now, no success so far though: I want to run a typing animation using CSS. The animation has to start after 7 seconds. I can't figure out how to do this tho. My code looks like this:

HTML

<div class='background-fullwidth'>    
    <div class="css-typing">
      This text will pop up using an typewriting effect
    </div>        
</div>

CSS

.css-typing  {
    width: 360px;

    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: type 3s steps(50, end);
    animation: type 3s steps(55, end);
    -o-animation: type 5s steps(50, end);
    -moz-animation: type 3s steps(55, end);

    padding: 10px;
}

.background-fullwidth {
  width: 400px;
  background-color: rgba(0, 50, 92, 0.7);
}    

@keyframes type {
    from { width: 0; }
    to { width: 360px; }
}

@-moz-keyframes type {
    from { width: 0; }
    to { width: 360px; }
}

@-webkit-keyframes type {
    from { width: 0; }
    to { width: 360px; }
}

Does anyone know how to add this timer - let's say the animation has to start after 7 seconds? From second 1 to 7 only the wraping DIV (blue background) has to be shown.

Fiddle looks like this: CSS Animation

Upvotes: 4

Views: 5864

Answers (5)

PraN NyLl
PraN NyLl

Reputation: 11

By experimenting for several times i found an easy/clever way to make this possible :

  1. You can start the animation after certain time
  2. Element will be hidden until the start of the animation.

My Keyframe Animation (It can be any animation) : 

@keyframes fadeUp{
    from{
    transform: translateY(100px);
    opacity: 0;
    }
    to{
    opacity: 1;
    }
}

Then i used the animation like:

h1{
animation: fadeUp 1.5s ease 7s backwards;    /*Waiting time of 7 seconds*/
}

Above code is similar to :

h1{
animation-name: fadeUp;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 7s;    /*For X waiting time change the value to Xs*/
animation-fill-mode: backwards;
}

:-)

Upvotes: 1

narasimhareddy969
narasimhareddy969

Reputation: 13

there is a property animation-delay

provide this property to your class element.

check the below example animation starts after 7 seconds

http://codepen.io/anon/pen/dNqmvB

Upvotes: 0

Tariq B.
Tariq B.

Reputation: 573

You'll have to use 3 different animation properties.

  1. animation-delay: It helps you achieve the solution to the basic problem of starting the animation after 7 seconds.
  2. animation-iteration-count; This property lets you decide the number of times the animation repeats itself. Setting it to 1 will limit it to a single animation instance.
  3. animation-fill-mode: Setting this property to forward will make sure that the width remains 320 at the end of the animation.

CSS

  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  width: 0; // So that the animation starts from 0

Review the fiddle at https://jsfiddle.net/kaminasw/at6mbxyr/

Upvotes: 4

elementzero23
elementzero23

Reputation: 1429

Use animation-delay property:

animation-delay: 2s;
-webkit-animation-delay: 2s;

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16301

You need to use animation-delay for that like this:

.css-typing {
    --other properties--
    -webkit-animation-delay: 7s; /* Safari 4.0 - 8.0 */
    animation-delay: 7s;
}

Upvotes: 0

Related Questions