Desire Code

Android Tutorial , Programming Tutorial, Php Tutorial, Learn Android, HTML Tutorial, Coding , Java Tutorial, GTU Programs, Learning Programming

Wednesday, 8 March 2017

Typing Animation With CSS3

Author:  |   |  No Comments | 

Today, we are learning about how to do text typing animation effect using CSS3.

Typing animation is useful when you need to hightlight some new offers in your website or attract user on that message.

This typing animation example is without jquery / javascript. In this example only CSS3 is used to apply this animation.

This type of animation used in mainly used on advertisement in website. Sometimes, these type of animation is used to attract users to their websites. It is useful to prompt some important sentences or give some important message for users in your website.

Now, I explain you to about how to make it text animation with css. I describe html and css code of this example in this post.

Let's see the example and follow steps :-

Related Post :


  • CSS :-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
        *       
        {
            box-sizing: inherit;
        }
 
        body
        {
            background-color: black;
            font-style: italic;
            font-weight: bold;
        }
 
        .typing, .item
        {
            height: 30px;
            display: block;

        }
 
        .typing
        {
            overflow: hidden;
            color: lime;
            width: 200px;
            height: 20px;
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
 
        .item
        {
            position: relative;
            font-size: 17px;
            animation: line_change_animation 18s steps(3);
            animation-iteration-count: 6;
        }
 
        .inner_item
        {
            display: inline-block;
            position: relative;
            line-height: 1;
        }
 
        .inner_item:after
        {
            content: "";
            position: absolute;
            top: -1px;
            right: 0;
            bottom: -2px;
            left: 0;
            border-left: 1px solid lime;
            background-color: #2a2a28;
            animation: typing_animation 3s steps(36) alternate;
            animation-iteration-count: 6;
        }
 
        /* This is typing animation effect code */
        @keyframes typing_animation {
            0% {
                left: 0;
                margin-right: auto;
            }
 
            100% {
                left: 100%;
                margin-left: .6em;
                margin-right: -.6em;
            }
        }
 
        /* This is line change animation effect code */
        @keyframes line_change_animation {
            0% {
                top: 0;
            }
 
            100% {
                top: -90px;
            }
        }


  • HTML :

1
2
3
4
<div class="typing">
        <span class="item"><span class="inner_item">Typing animation with css3.</span></span>
        <span class="item"><span class="inner_item">Created By Desire Code</span></span>       
</div>


  • OUTPUT :-


  • Click Here For Live Demo :
Live Demo

, , , , , , ,

0 comments:

Post a Comment

Like us on Facebook

Site Visitor

Powered by Blogger.