SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS Animation

  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Animation

    I am playing around with animations and I am attempting a text typing animation.

    HTML:

    <p class="test1">This is test line 1</p>
    <p class="test1">This is test line 2</p>
    <p class="test1">This is test line 3</p>
    <p class="test1">This is test line 4</p>
    <p class="test1">This is test line 5</p>
    <p class="test1">This is test line 6<span>|</span></p>


    CSS:

    p.test1{
    color: black;
    font-family: "Courier";
    font-size:2em;
    font-weight:bold;
    line-height:.8em;
    margin-top:4%;
    /*margin: 10px 0 0 10px;*/
    white-space: nowrap;
    overflow: hidden;
    width: 30em;
    animation: type 4s steps(18, end);
    }

    p.test1:nth-child(2){
    animation: type2 8s steps(18, end);
    }

    p.test1:nth-child(3){
    animation: type3 16s steps(18, end);
    }
    p.test1:nth-child(4){
    animation: type4 24s steps(18, end);
    }
    p.test1:nth-child(5){
    animation: type5 30s steps(18, end);
    }
    p.test1:nth-child(6){
    animation: type6 40s steps(18, end);
    }

    p.test1 a{
    color: black;
    text-decoration: none;
    }

    span{
    animation: blink 1s infinite;
    }

    @keyframes type{
    from { width: 0; }
    }

    @keyframes type2{
    0%{width: 0;}
    50%{width: 0;}
    100%{ width: 100; }
    }

    @keyframes type3{
    0%{width: 0;}
    50%{width: 0;}
    100%{ width: 100; }
    }

    @keyframes type4{
    0%{width: 0;}
    50%{width: 0;}
    100%{ width: 100; }
    }

    @keyframes type5{
    0%{width: 0;}
    50%{width: 0;}
    100%{ width: 100; }
    }

    @keyframes type6{
    0%{width: 0;}
    50%{width: 0;}
    100%{ width: 100; }
    }

    @keyframes blink{
    to{opacity: .0;}
    }

    ::selection{
    background: black;
    }



    The above is an animation types out six separate lines of text. I want each line to type out at the same speed but each line initiate in succession. As I increase the number of seconds for each line I can get the subsequent line to initiate after the previous line is complete, but each subsequent line then types at a slower pace then the previous. By the time I am at the last line it is typing at a snails pace. I am in a catch 22. If I decrease the seconds on each line the pace increases, but it initiates before the previous line is complete and vice versa. If this explanation makes sense, does anyone have an advice how I can get this to work?

    Thank you!

  2. #2
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe my number of steps should be 108 not 18. Typo.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Couldn't you simplify it with an animation delay.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p.test1 {
    	color: black;
    	font-family: "Courier";
    	font-size:2em;
    	font-weight:bold;
    	line-height:.8em;
    	margin-top:4%;
    	/*margin: 10px 0 0 10px;*/
    white-space: nowrap;
    	overflow: hidden;
    	width: 0em;
    	animation: type 4s steps(108, end);
    	animation-fill-mode: forwards;
    }
    p.test1:nth-child(2) { animation-delay: 3s; }
    p.test1:nth-child(3) { animation-delay: 6s; }
    p.test1:nth-child(4) { animation-delay: 9s; }
    p.test1:nth-child(5) { animation-delay: 12s; }
    p.test1:nth-child(6) { animation-delay: 15s; }
    p.test1 a {
    	color: black;
    	text-decoration: none;
    }
    span { animation: blink 1s infinite; }
     @keyframes type {
    		0% {width: 0;}
    	50% {width: 0;}
    	100%{width: 30em;}
    }
    }
     @keyframes blink { to {opacity: .0;}}
    ::selection { background: black; }
    </style>
    </head>
    
    <body>
    <p class="test1">This is test line 1</p>
    <p class="test1">This is test line 2</p>
    <p class="test1">This is test line 3</p>
    <p class="test1">This is test line 4</p>
    <p class="test1">This is test line 5</p>
    <p class="test1">This is test line 6<span>|</span></p>
    </body>
    </html>
    You will have to add the delay for each line manually if you have more items so if the amount of lines are unknown then you may need to initiate the effect with js.

    (You will have to add the webkit syntax of course.)

  4. #4
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it! I knew I needed an animation delay but I wasn't sure how to structure it. Thank you very much!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •