css3 animation learning_html/css_WEB-ITnose

Animation effects can be achieved in css3, mainly through the newly added attributes (transform, transition, animation) in css3.

For their detailed explanation, please refer to W3CSCHOOL

The following is the rendering:

Similar to a tab, when an input is clicked, the corresponding content area is displayed with an animation effect.

Html code

1.   
2.   
3.       
4.        
5.   
6.   
7.   
8.           
9.           
10.               
11.               
12.                   
13.                 Serendipity  
14.                   
15.                 Happiness  
16.                   
17.                 Tranquillity  
18.                   
19.                 Positivity  
20.                   
21.                 Passion  
22.                   
23.                   
24.                   
25.                       
26.                       
27.                       
28.                         

    Serendipity

      
29.                         

    Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.

      
30.                       
31.                       
32.                     
      
33.                         

    Happiness

      
34.                         

    Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.

      
35.                       
36.                       
37.                     
      
38.                         

    Tranquillity

      
39.                         

    Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.

      
40.                       
41.                       
42.                     
      
43.                         

    Positivity

      
44.                         

    Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.

      
45.                       
46.                       
47.                     
      
48.                         

    Passion

      
49.                         

    Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.

      
50.                       
51.   
52.