跳动文字纯动画源码

曲奇饼

1.   /*CSS部分源码*/
   
2. @keyframes style1 {
   
3.   from, 20%, 53%, 80%, to {
   
4.     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   
5.     transform: translate3d(0,0.5,0.1);
   
6.   }
   
7.   40%, 43% {
   
8.     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
   
9.     transform: translate3d(0px, -35px, 0);
   
10.   }
    
11. }
    
12. 
    
13. @keyframes style2 {
    
14.   from {
    
15.     transform: scale3d(1, 1, 1);
    
16.   }
    
17.   30% {
    
18.     transform: scale3d(1.25, 0.75, 1);
    
19.   }
    
20.   40% {
    
21.     transform: scale3d(0.75, 1.25, 1);
    
22.   }
    
23.   50% {
    
24.     transform: scale3d(1.15, 0.85, 1);
    
25.   }
    
26.   65% {
    
27.     transform: scale3d(.95, 1.05, 1);
    
28.   }
    
29.   75% {
    
30.     transform: scale3d(1.05, .95, 1);
    
31.   }
    
32.   to {
    
33.     transform: scale3d(1, 1, 1);
    
34.   }
    
35. }
    
36. 
    
37. @keyframes style3 {
    
38.   from {
    
39.     transform: scale3d(1, 1, 1);
    
40.   }
    
41.   10%, 20% {
    
42.     transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    
43.   }
    
44.   30%, 50%, 70%, 90% {
    
45.     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    
46.   }
    
47.   40%, 60%, 80% {
    
48.     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    
49.   }
    
50.   to {
    
51.     transform: scale3d(1, 1, 1);
    
52.   }
    
53. }
    
54. 
    
55. @keyframes style4 {
    
56.   from, 20%, 40%, 60%, 80%, to {
    
57.       animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    
58.     }
    
59.     0% {
    
60.       opacity: 0;
    
61.       transform: scale3d(.3, .3, .3);
    
62.     }
    
63.     20% {
    
64.       transform: scale3d(1.1, 1.1, 1.1);
    
65.     }
    
66.     40% {
    
67.       transform: scale3d(.9, .9, .9);
    
68.     }
    
69.     60% {
    
70.       opacity: 1;
    
71.       transform: scale3d(1.03, 1.03, 1.03);
    
72.     }
    
73.     80% {
    
74.       transform: scale3d(.97, .97, .97);
    
75.     }
    
76.     to {
    
77.       opacity: 1;
    
78.       transform: scale3d(1, 1, 1);
    
79.     }
    
80. }

复制代码

1.   //将上面的代码做成文件 并引入HTML
   
2. <link rel='stylesheet' href='animations.css'>
   

复制代码

1.   //HTML里面的style代码
   
2. <style type='text/css'>
   
3. 
   
4. .is-animate.style1 > div { animation-name: style1; }
   
5. 
   
6. .is-animate > div {
   
7.   animation-duration: 1s;
   
8.   animation-fill-mode: both;
   
9.   animation-iteration-count: infinite;
   
10. }
    
11. 
    
12. .is-animate > div:nth-child(1) { animation-delay: 0.0s }
    
13. .is-animate > div:nth-child(2) { animation-delay: 0.1s }
    
14. .is-animate > div:nth-child(3) { animation-delay: 0.2s }
    
15. .is-animate > div:nth-child(4) { animation-delay: 0.3s }
    
16. .is-animate > div:nth-child(5) { animation-delay: 0.4s }
    
17. .is-animate > div:nth-child(6) { animation-delay: 0.5s }
    
18. 
    
19. </style>

复制代码

1.   //HTML文件代码
   
2. <div class='is-animate style1'>
   
3.   <div>1</div>
   
4.   <div>2</div>
   
5.   <div>3</div>
   
6.   <div>4</div>
   
7.   <div>5</div>
   
8.   <div>6</div>
   
9. </div>

复制代码

大致的效果如下: