CSS for typing effects

JS implementation

Recent projects need to implement a character-by-word typing effect, on-line search has a good jquery plugin typed.js, the effect is great

<p class= "element" ></p><script src= "Typed.js" ></script><script>  $ (function () {      $ (". Element"). Typed ({        strings: ["first sentence.", "Second sentence."],        typespeed:0      })  ; </script>

Specific usage can look at the project address, annotated source code more than 200 lines, not complicated

The implementation method is not magical, most people can easily think of, with JS to add characters to the container, the author made a lot of characters out of the speed of God horse, we can masturbate a simple

var s = ' Hello world! Hello world! Hello world! '; var con = $ ('. container '); var index = 0;var length = S.length;var tId = null;function start () {  con.text (');    Tid=setinterval (function () {    con.append (S.charat (index));    if (index++ = = = length) {    clearinterval (tId);    index = 0;    Start ()    }  },100);} Start ();

JS Bin

CSS Implementation

If the details and browser compatibility requirements are not very strict, we can implement the CSS3 through the

Animation-timing-function

CSS3 's animations have come into contact, and we usually use them.

Animation:animation-name animation-duration animation-iteration-countanimation:name 5s Infinite;

In fact, the full version of the animation parameters are many, can also be written as separate attributes

1. Animation-name

2. Animation-duration

3. Animation-timing-function

4. Animation-delay

5. Animation-iteration-count

6. Animation-direction

Today we are going to pay attention to animation-timing-function, most of the animation in the timeline when the linear change, jquery animation when we use the liner parameter is this meaning, However, CSS3 provides some other ways to change the Animation-timing-function property specified by the

1. Ease

2. Linear

3. Ease-in

4. Ease-out

5. Ease-in-out

6. Step-start

7. Step-end

8. Steps

9. Cubic-bezier

Each animation effect can correspond to a Bezier curve cubic-bezier can help me visually look at the Bézier curve effect, here is not much to say

Steps

We look at the effect of steps, in fact, as the name implies can think of what steps mean, just like the Russian box of small lattice down is also animation, but not continuous, more like frame-by, steps is to achieve this effect

The syntax of steps

Steps (Number_of_steps, [start|end])

• How many steps number_of_steps animations are performed

• Direction animation display status, end: Default value, first frame before start, start: Display after first frame end

See a scientific picture to help understand

Two steps.

With this, we can make a fun effect.

JS Bin

. walk {  width:125px;  height:150px;  Background:url (http://www.php.cn/) left;  -webkit-animation:anima 1s steps (+) infinite;} @-webkit-keyframes anima{from    {background-position:2000px 0;}    to {background-position:0px 0;}}

Typing effect

Typing effect can be imagined, change the width of the container can be (only single-line use, but also to achieve each step to increase the length and letter width consistent, or JS good actually)

. typing{    width:250px;    White-space:nowrap;    Overflow:hidden;    -webkit-animation:type 3s steps (, end) infinite;  Animation:type 3s steps (, end) infinite;} @-webkit-keyframes type{from    {width:0;}} @keyframes type{from    {width:0;}}

JS Bin