Use CSS3 to implement animation instance code for villain

Use the CSS3 properties to implement animations with musical figures, without using JS code at all:

Note: The Chrome browser works best with the final effect static diagram:

The HTML code is as follows:

            Practice a villain's animation                                                                                             I                        Y            O            U                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    & #9835;        & #9834;

The CSS code is as follows:

/* CSS Document */body,html{width:100%;    height:100%;    margin:0;    display:table; Text-align:center;}. music1{Display:none;}.     warp{margin-top:100px;     Vertical-align:middle; Position:relative;}.    backgroud_circle{width:400px;    height:400px;    border-radius:100%;    Background: #6699FF;    margin:0 Auto;    Overflow:hidden;    -webkit-mask-image:-webkit-radial-gradient (#BADA55, #BADA55);      -moz-mask-image:-webkit-radial-gradient (#BADA55, #BADA55);      -o-mask-image:-webkit-radial-gradient (#BADA55, #BADA55);    -ms-mask-image:-webkit-radial-gradient (#BADA55, #BADA55);    /* Perform animation */Animation:grow 0.7s ease;    -webkit-animation:grow 0.7s Ease; Transform-origin:center;}    /* Body body*/.body{width:285px;    height:400px;    margin:0 Auto;    Background: #333333;    position:relative;    top:100px;    border-radius:100px;    /* Perform animation */-webkit-animation:body-enter 0.7s 0.2s 1 ease;    Animation:body-enter 0.7s 0.2s 1 ease; /*-webkit-animation-fill-mOde:forwards;    animation-fill-mode:forwards;*/}/* head head*/.head{width:196px;    height:260px;    border-radius:50px;    Background: #ffe4be;    Position:absolute;    top:50%;    left:50%;    margin-top:-210px;    margin-left:-98px;    /* Animation execution */Animation:grow 0.7s 0.5s ease;    -webkit-animation:grow 0.7s 0.5s Ease; Transform-origin:bottom;}    /* Hair */.hair-main{width:220px;    height:0px;    Background: #FF9966;    border-radius:54px 54px 0px 0px;    Animation:hair-main 0.7s 0.9s Ease;    -webkit-animation:hair-main 0.7s 0.9s Ease;    Animation-fill-mode:forwards;    -webkit-animation-fill-mode:forwards;    position:relative;    margin-left:-12px;    margin-top:-10px; Z-index:2;}    /* sideburns */.sideburn{width:8px;    height:25px;    Background: #FF9966;    opacity:0;    bottom:-25px;    Position:absolute;    Animation:sideburn-main 0.7s 1s ease;    -webkit-animation:sideburn-main 0.7s 1s ease;    Animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}. Sideburn#left{left:12px;}. sideburn#right{right:12px;}    /* Ear */.ear{width:24px;    height:35px;    Position:absolute;    Background: #ffe4be;    top:116px;    border-radius:12px;    Animation:grow 0.7s 1.3s Ease;    -webkit-animation:grow 0.7s 1.3s Ease;    Animation-fill-mode:forwards;    -webkit-animation-fill-mode:forwards;    Transform:scale (0); -webkit-transform:scale (0);}. ear#left{left:-12px;}. ear#right{right:-12px;}    /* Face */.face{width:180px;    height:0px;    border-radius:48px;    Background: #ffe4be;    Position:absolute;    top:40px;    left:8px;    Animation:hair-main 0.7s 0.5s Linear;    -webkit-animation:hair-main 0.7s 0.5s Linear;    Animation-fill-mode:forwards;    -webkit-animation-fill-mode:forwards; Z-index:3;}    /* nose */.nose{width:20px;    height:45px;    Opacity:1;    border-top-left-radius:20px;    Background: #ffe4be;    Position:absolute;    top:80px;    left:50%;    margin-left:-20px;      Animation:shadow-main 0.7s 3s ease; Animation-fill-mode:forwaRds      -webkit-animation:shadow-main 0.7s 3s ease;      -webkit-animation-fill-mode:forwards;     opacity:0; Z-index:5;}    /* Form The shadow of the nose */.shadow-main{width:98px;    height:260px;    Position:absolute;    bottom:-84px;    left:-8px;    Z-index:4; Overflow:hidden;}.    shadow{width:98px;    height:260px;    border-radius:50px;    Background:rgba (149,36,0,0.1);    Position:absolute;    opacity:0;    Z-index:4;    Animation:shadow-main 1s 2.8s ease;    -webkit-animation:shadow-main 1s 2.8s ease;    Animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}    /* Eye shadow */.eye-shadow{width:30px;    height:15px; border-radius:0    0 15px 15px;    Background:rgba (149,36,0,0.1);    Position:absolute;    top:70px;    Animation:grow 0.7s 2s ease;    -webkit-animation:grow 0.7s 2s ease;    Animation-fill-mode:forwards;    -webkit-animation-fill-mode:forwards;    Transform:scale (0); -webkit-transform:scale (0);}.    eye-shadow#left{left:35px; Z-index:5;}.  eye-shadow#right{  right:35px;}    /* Eyebrow */.eyebrow{width:40px;    height:10px;    Background: #FF9966;    Position:absolute;    top:-35px;    left:50%;    opacity:0;    margin-left:-20px;    -webkit-backface-visibility:hidden;/* the back of the set element is visible */}.eyebrow#left{animation:eyebrow-left 0.7s 2.2s ease;    -webkit-animation:eyebrow-left 0.7s 2.2s Ease;    Animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}.    eyebrow#right{animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out;    -webkit-animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out;    Animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}    /* Two blue eyes */.eye{width:20px;    height:28px;    border-radius:10px;    Background: #334C68;    Position:absolute;    top:-18px;    left:50%;    margin-left:-10px;    Animation:grow 0.7s 2.2s Ease;    -webkit-animation:grow 0.7s 2.2s Ease;    Animation-fill-mode:forwards; -webkit-animatioN-fill-mode:forwards;    Transform:scale (0);    -webkit-transform:scale (0);    Transform-origin:bottom; -webkit-transform-origin:bottom;}    /* Mouth */.mouse{width:66px;    height:33px;    Background: #FFFFFF; border-radius:0    0 33px 33px;    Position:absolute;    left:50%;    top:150px;    margin-left:-33px;    Animation:grow 0.7s 2.6s Ease;    -webkit-animation:grow 0.7s 2.6s Ease;    Animation-fill-mode:forwards;    -webkit-animation-fill-mode:forwards;    Transform:scale (0); -webkit-transform:scale (0);}    /* Background Highlight light shadow */.tight-light{width:400px;    height:600px;    Background: #ffffff;    opacity:0;    Position:absolute;    right:15%;    animation:tight-light 1s 2.8s ease;    -webkit-animation:tight-light 1s 2.8s ease;    Animation-fill-mode:forwards;    -webkit-animation-fill-mode:forwards;    Transform:translate (200px,0px); -webkit-transform:translate (200px,0px);}    /* Background highlight dark shadow */.tight-dark{width:400px;    height:600px;    Background: #000000;    opacity:0; Position:absOlute;    left:10%;    top:35px;    Animation:tight-dark 1s 2.8s ease;    -webkit-animation:tight-dark 1s 2.8s ease;    Animation-fill-mode:forwards;    -webkit-animation-fill-mode:forwards;    Transform:translate ( -200px,0px);    -webkit-transform:translate ( -200px,0px); Z-index:6;}    /* Outside yellow circle */.border_circle{width:399px;    height:399px;    border-radius:50%;    border:10px solid #ff8345;    Position:absolute;    top:50%;    left:50%;    margin-left:-220px;    margin-top:-220px;    Transform:scale (0);    -webkit-transform:scale (0);    Transform-origin:center; -webkit-transform-origin:center;}    /* Outer yellow ring one*/.border_circle#one{animation:border_circle 1s 3.1s ease;    -webkit-animation:border_circle 1s 3.1s ease;    Animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}    /* Outer yellow ring two*/.border_circle#two{animation:border_circle 1s 3.3s ease;    -webkit-animation:border_circle 1s 3.3s ease;    Animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;} /*i You*/.backgroud_circle. shirt-text{font-family: "Microsoft Jas Black", Sans-serif;    font-size:50px;    font-weight:700;    Color: #FFFFFF;    position:relative;    top:180px;    Display:inline-block;    -webkit-text-stroke:2px;    text-stroke:2px;    opacity:0;    -webkit-transform:translate (0px,100px);    Transform:translate (0px,100px);    Animation-fill-mode:forwards!important;    -webkit-animation-fill-mode:forwards!important; Z-index:5;}.    Backgroud_circle. Shirt-text:nth-of-type (1) {Animation:shirt-text 0.7s 3.3s ease; -webkit-animation:shirt-text 0.7s 3.3s Ease;}.    Backgroud_circle. Shirt-text:nth-of-type (2) {color: #FF0000;    Animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out; -webkit-animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out;}.    Backgroud_circle. Shirt-text:nth-of-type (3) {Animation:shirt-text 0.7s 3.5s ease; -webkit-animation:shirt-text 0.7s 3.5s Ease;}. Backgroud_circle. Shirt-text:nth-of-type (4) {Animation:shirt-text 0.7s 3.6s Ease; -webkit-animation:shirt-text 0.7s 3.6s Ease;}.    Backgroud_circle. Shirt-text:nth-of-type (5) {Animation:shirt-text 0.7s 3.7s ease; -webkit-animation:shirt-text 0.7s 3.7s Ease;}    /* Note */.music{Position:absolute;    font-size:150px;    Color: #FCB040;    width:1px;    left:50%; opacity:0;}.    music#one{margin-left:-250px;    top:50%;    animation:note 2s 3.5s infinite ease;    Animation-fill-mode:forwards;    -webkit-animation:note 2s 3.5s infinite ease; -webkit-animation-fill-mode:forwards;}.  music#two{margin-left:150px;  top:30%;  animation:note 2s 4.3s infinite ease;  Animation-fill-mode:forwards;  -webkit-animation:note 2s 4.3s infinite ease; -webkit-animation-fill-mode:forwards;}    /* Animated event for background circle: Outward expansion from center */@-webkit-keyframes grow{0%{-webkit-transform:scale (0); Transform:scale (0);}    60%{-webkit-transform:scale (1.15); Transform:scale (1.15);}    80%{-webkit-transform:scale (0.95); Transform:scale (0.95);} 100%{-webkit-transform:scale (1); Transform:scale (1);}}    @keyframes grow{0%{-webkit-transform:scale (0); Transform:scale (0);}    60%{-webkit-transform:scale (1.15); Transform:scale (1.15);}    80%{-webkit-transform:scale (0.95); Transform:scale (0.95);} 100%{-webkit-transform:scale (1); Transform:scale (1);}}    /* Body entry style: From bottom up first to big and then back to normal */@-webkit-keyframes body-enter{0%{-webkit-transform:translatey (200px);}    60%{-webkit-transform:translatey ( -20px);}    80%{-webkit-transform:translatey (30px);} 100%{-webkit-transform:translatey (0);}}    @keyframes body-enter{0%{-webkit-transform:translatey (200px);}    60%{-webkit-transform:translatey ( -20px);}    80%{-webkit-transform:translatey (30px);} 100%{-webkit-transform:translatey (0);}} /* Hair Animation: */@-webkit-keyframes hair-main{0%{height:0px;-webkit-transform:translatey (137px); Transform:translatey (    137PX);} 100%{height:137px;-webkit-transform:translatey (0); Transform:translatey (0);}} @keyframes hair-main{0%{height:0px;-webkit-transform:translatey (137px); transform:tRanslatey (137PX);} 100%{height:137px;-webkit-transform:translatey (0); Transform:translatey (0);}} /* Sideburns animation */@-webkit-keyframes sideburn-main{0%{opacity:0;-webkit-transform:translatey ( -25px); Transform:translateY (    -25PX);} 100%{opacity:1;-webkit-transform:translatey (0); Transform:translatey (0);}}    @keyframes sideburn-main{0%{opacity:0;-webkit-transform:translatey ( -25px); Transform:translatey ( -25px);} 100%{opacity:1;-webkit-transform:translatey (0); Transform:translatey (0);}} /* Nose Shadow Animation: */@-webkit-keyframes shadow-main{0%{opacity:0;-webkit-transform:translate (98px,0px); Transform:    Translate (98px,0px);}    50%{opacity:0;} 100%{opacity:1;-webkit-transform:translate (0px,0px); transform:translate (0px,0px);}}    @keyframes shadow-main{0%{opacity:0;-webkit-transform:translate (98px,0px); transform:translate (98px,0px);}    50%{opacity:0;} 100%{opacity:1;-webkit-transform:translate (0px,0px); transform:translate (0px,0px);}}    /* Left eyebrow animation */@-webkit-keyframes eyebrow-left{0%{opacity:0;-webkit-transform:translatey ( -25px); Transform:translatey ( -25px);}    70%{opacity:1;-webkit-transform:translatey (5px); Transform:translatey (5px);} 100%{opacity:1;-webkit-transform:translatey (0); Transform:translatey (0);}}    @keyframes eyebrow-left{0%{opacity:0;-webkit-transform:translatey ( -25px); Transform:translatey ( -25px);}    70%{opacity:1;-webkit-transform:translatey (5px); Transform:translatey (5px);} 100%{opacity:1;-webkit-transform:translatey (0); Transform:translatey (0);}} /* Right Eyebrow animation */@-webkit-keyframes eyebrow-right{0%{opacity:0;-webkit-transform:translatey ( -25px); Transform:translateY    ( -25px);}    70%{opacity:1;-webkit-transform:translatey (5px); Transform:translatey (5px);} 100%{opacity:1;-webkit-transform:rotate (9deg) translatey (0) transform:rotate (9deg) translatey (0);}}    @keyframes eyebrow-right{0%{opacity:0;-webkit-transform:translatey ( -25px); Transform:translatey ( -25px);} 70%{opacity:1;-webkit-transform:translatey (5px); Transform:translaTey (5px);} 100%{opacity:1;-webkit-transform:rotate (9deg) translatey (0) transform:rotate (9deg) translatey (0);}}    /* Eyebrow rise animation */@-webkit-keyframes eyebrow-right-raise{0%{top:-35px;}    70%{top:-35px;} 100%{top:-45px;}}    @keyframes eyebrow-right-raise{0%{top:-35px;}    70%{top:-35px;} 100%{top:-45px;}} /* Background Highlight light animation */@-webkit-keyframes tight-light{0%{opacity:0;-webkit-transform:translate (200px,0px); Transform:    Translate (200px,0px);} 100%{opacity:0.2;-webkit-transform:rotate (45deg) translate (0px,0px); Transform:rotate (45deg) translate (0px,0px);}}    @keyframes tight-light{0%{opacity:0;-webkit-transform:translate (200px,0px); transform:translate (200px,0px);} 100%{opacity:0.2;-webkit-transform:rotate (45deg) translate (0px,0px); Transform:rotate (45deg) translate (0px,0px);}} /* Background highlighting dark animation */@-webkit-keyframes tight-dark{0%{opacity:0;-webkit-transform:translate ( -200px,0px); Transform:    Translate ( -200px,0px);} 100%{opacity:0.2;-webkit-transform:rotate ( -45deg) translate (0px,0px); Transform:rotate ( -45deg) translate (0px,0px);}}    @keyframes tight-dark{0%{opacity:0;-webkit-transform:translate ( -200px,0px); transform:translate ( -200px,0px);} 100%{opacity:0.2;-webkit-transform:rotate ( -45deg) translate (0px,0px); Transform:rotate ( -45deg) translate (0px,0px) ;}}    /* Outside the yellow circle animation */@-webkit-keyframes border_circle{0%{border-width:20px; transform:scale (0);-webkit-transform:scale (0);}    40%{border-width:20px; Transform:scale (1);-webkit-transform:scale (1); margin-left:-220px; margin-top:-220px;} 100%{border-width:0px; Transform:scale (1.5);-webkit-transform:scale (1.5); border-style:double; margin-left:-200px ; margin-top:-200px;}}    @keyframes border_circle{0%{border-width:20px; transform:scale (0);-webkit-transform:scale (0);}    40%{border-width:20px; Transform:scale (1);-webkit-transform:scale (1); margin-left:-220px; margin-top:-220px;} 100%{border-width:0px; Transform:scale (1.5);-webkit-transform:scale (1.5); border-style:double; margin-left:-200px ; margin-top:-200px;}} /* Text */@-webkit-keyframes shirt-text{0%{opacity:0;-webkit-transform:translate (0px, 80px); Transform:translate (0px,    80px);}    60%{opacity:1;-webkit-transform:translate (0px, -50px); Transform:translate (0px, -50px);}    80%{opacity:1;-webkit-transform:translate (0px, 140px); Transform:translate (0px, 140px);} 100%{opacity:1;-webkit-transform:translate (0px, 100px); Transform:translate (0px, 100px);}}    @keyframes shirt-text{0%{opacity:0;-webkit-transform:translate (0px, 80px); Transform:translate (0px, 80px);}    60%{opacity:1;-webkit-transform:translate (0px, -50px); Transform:translate (0px, -50px);}    80%{opacity:1;-webkit-transform:translate (0px, 140px); Transform:translate (0px, 140px);} 100%{opacity:1;-webkit-transform:translate (0px, 100px); Transform:translate (0px, 100px);}}    @-webkit-keyframes heart{0%{} 30%{color: #00FF99;}    70%{color: #FFFF00;}    100%{}} @keyframes heart{0%{} 30%{color: #00FF99;}    70%{color: #FFFF00;} 100%{}}/* Notes */@-webkit-keyframes note{0% {opacity:0;      -webkit-transform:translate (0px,50px);    Transform:translate (0px,50px);      } 30% {-webkit-transform:rotate (12deg) translate ( -30px,0px);    Transform:rotate (12deg) translate ( -30px,0px);    } 45% {opacity:1;      } 60% {-webkit-transform:rotate ( -12deg) translate (30px,-100px);    Transform:rotate ( -12deg) translate (30px,-100px);      } 100% {opacity:0;      -webkit-transform:rotate (0deg) translate (0px,-200px);    Transform:rotate (0deg) translate (0px,-200px);      }} @keyframes note{0% {opacity:0;      -webkit-transform:translate (0px,50px);    Transform:translate (0px,50px);      } 30% {-webkit-transform:rotate (12deg) translate ( -30px,0px);    Transform:rotate (12deg) translate ( -30px,0px);    } 45% {opacity:1;      } 60% {-webkit-transform:rotate ( -12deg) translate (30px,-100px);    Transform:rotate ( -12deg) translate (30px,-100px);      } 100% {opacity:0;      -webkit-transform:rotate (0deg) translate (0px,-200px);    Transform:rotate (0deg) translate (0px,-200px); }}