Pokemon. Pikachu on acid css3 animation
How do I make an pokemon. pikachu on acid css3 animation?
5 div's! (excluding wrapper div) no js. based on animated short "Pikachu on Acid" by high5toons (youtube google it). What is a pokemon. pikachu on acid css3 animation? How do you make a pokemon. pikachu on acid css3 animation? This script and codes were developed by Mikhail Korotkov on 12 November 2022, Saturday.
Pokemon. Pikachu on acid css3 animation Previews
Pokemon. Pikachu on acid css3 animation - Script Codes HTML Codes
<!DOCTYPE html>
<html class="bg">
<head> <meta charset="UTF-8"> <title>Pokemon. Pikachu on acid css3 animation</title> <meta name="author" content="Mikhail Korotkov"> <meta name="contact" content="[email protected]"> <!--source: https://www.youtube.com/watch?v=X5Izm1LQfw4 by high5toons-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="eye"> <div class="eyelids"></div> <div class="eyelids2"></div> </div> <div class="nose"></div> <div class="mouth"></div>
</div>
</body>
</html>Pokemon. Pikachu on acid css3 animation - Script Codes CSS Codes
* {margin:0; padding:0;}
.bg { background: #FFD720; -webkit-animation: bgch 8.5s infinite; -moz-animation: bgch 8.5s infinite; -o-animation: bgch 8.5s infinite; animation: bgch 8.5s infinite; animation-fill-mode: forwards; /*save properties after the animation is done*/ -o-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.wrapper { width: 1024px; margin:0 auto;
}
.eyelids { /*left*/ border-radius: 50%; height: 350px; position: absolute; top: 0; overflow: hidden; width: 350px;
}
.eyelids:after { /*upper*/ content: ""; overflow: hidden; height: 350px; width:370px; background:#FFD720; position:absolute; border-radius: 45% / 50%; overflow: hidden; z-index: 999; margin-top: -350px; margin-left: -9px; box-shadow: 446px 0 0 0 #FFD720; /*black part of the second eye*/ -webkit-animation: blink 1.7s infinite, bgch 8.5s infinite; -moz-animation: blink 1.7s infinite, bgch 8.5s infinite; -o-animation: blink 1.7s infinite, bgch 8.5s infinite; animation: blink 1.7s infinite, bgch 8.5s infinite; animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.eyelids:before { /*lower*/ background: none repeat scroll 0 0 rgba(0, 0, 0, 0); /*empty circle*/ border-radius: 50%; box-shadow: 0 83px 0 1px #FFD720; /*yellow circle with offset*/ content: ""; height: 350px; margin-left: -7px; margin-top: 0px; position: absolute; width: 364px; -webkit-animation: blink2 1.7s infinite, bgchE 8.5s infinite; -moz-animation: blink2 1.7s infinite, bgchE 8.5s infinite; -o-animation: blink2 1.7s infinite, bgchE 8.5s infinite; animation: blink2 1.7s infinite, bgchE 8.5s infinite; animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.eyelids2 { /*right*/ border-radius: 50%; height: 350px; margin-left: 446px; overflow: hidden; position: absolute; top: 0; width: 350px;
}
.eyelids2:after { /*upper*/ content: ""; overflow: hidden; height: 350px; width:370px; background:#FFD720; position:absolute; border-radius: 45% / 50%; overflow: hidden; z-index: 999; margin-top: -350px; margin-left: -9px; box-shadow: 446px 0 0 0 #FFD720; /*black part of the second eye*/ -webkit-animation: blink 1.7s infinite, bgch 8.5s infinite; -moz-animation: blink 1.7s infinite, bgch 8.5s infinite; -o-animation: blink 1.7s infinite, bgch 8.5s infinite; animation: blink 1.7s infinite, bgch 8.5s infinite; animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.eyelids2:before { /*lower*/ background: none repeat scroll 0 0 rgba(0, 0, 0, 0); /*empty circle*/ border-radius: 50%; box-shadow: 0 83px 0 1px #FFD720; /*yellow circle with offset*/ content: ""; height: 350px; margin-left: -7px; margin-top: 0px; position: absolute; width: 364px; -webkit-animation: blink2 1.7s infinite, bgchE 8.5s infinite; -moz-animation: blink2 1.7s infinite, bgchE 8.5s infinite; -o-animation: blink2 1.7s infinite, bgchE 8.5s infinite; animation: blink2 1.7s infinite, bgchE 8.5s infinite; animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.eye { /*black part of the eye*/ margin-top: 40px; height: 350px; width:350px; background:#000000; position:relative; border-radius: 50%; margin-left: 114px; box-shadow: 446px 0 0 0 #000000; /*black part of the second eye*/ -webkit-animation: bgchEYE 8.5s infinite; -moz-animation: bgchEYE 8.5s infinite; -o-animation: bgchEYE 8.5s infinite; animation: bgchEYE 8.5s infinite; animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.eye:before { /*pupil*/ background: none repeat scroll 0 0 #FFFFFF; border-radius: 50%; content: ""; display: block; position:relative; top: 100px; height: 150px; width: 150px; margin: 100px auto 0; box-shadow: 440px 0 0 1px #FFFFFF; /* second pupil */ -webkit-animation: bgchPUP 8.5s infinite; -moz-animation: bgchPUP 8.5s infinite; -o-animation: bgchPUP 8.5s infinite; animation: bgchPUP 8.5s infinite; animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.eye:after { /*cheeks*/ background: none repeat scroll 0 0 #F61037; border-radius: 50%; content: ""; height: 230px; width: 230px; margin-left: -120px; margin-top: 170px; position: absolute; box-shadow: 810px 0 0 1px #F61037; /* second cheek */ z-index: 1000;/* bgg 0.1s 2.1s, bgbb 0.1s 4.8s, bgyy 0.1s 7.5s; */ -webkit-animation: bgchch 8.5s infinite; -moz-animation: bgchch 8.5s infinite; -o-animation: bgchch 8.5s infinite; animation: bgchch 8.5s infinite; animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.nose { position: relative; margin: -28px auto 0; border-left: 25px solid rgba(0, 0, 0, 0); border-right: 25px solid rgba(0, 0, 0, 0); border-top: 28px solid #000000; height: 0; width: 0;
}
.mouth { position: relative; margin:0 auto; margin-top: 50px; border-left: 50px solid rgba(0, 0, 0, 0); border-right: 50px solid rgba(0, 0, 0, 0); border-bottom: 67px solid #000000; height: 0; width: 0;
}
.mouth:before { border-bottom: 54px solid #FFD720; border-left: 50px solid rgba(0, 0, 0, 0); border-right: 50px solid rgba(0, 0, 0, 0); content: ""; left: -50px; margin-top: 13px; position: absolute; -webkit-animation: bgchm 8.5s infinite; -moz-animation: bgchm 8.5s infinite; -o-animation: bgchm 8.5s infinite; animation: bgchm 8.5s infinite; animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
/*MOUTH COLOR CHANGING ANIMATION*/
@-webkit-keyframes bgchm { 15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/ 16% {border-bottom: 54px solid #0099cc;} /*change*/ 35% {border-bottom: 54px solid #0099cc;} /*wait*/ 36% {border-bottom: 54px solid #ff6699;} /*change*/ 55% {border-bottom: 54px solid #ff6699;} /*wait*/ 56% {border-bottom: 54px solid #FFD720;} /*change*/ 75% {border-bottom: 54px solid #FFD720;} /*wait*/ 76% {border-bottom: 54px solid #0099cc;} /*change*/ 95% {border-bottom: 54px solid #0099cc;} /*wait*/ 96% {border-bottom: 54px solid #FFD720;} /*change*/
}
@-moz-keyframes bgchm { 15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/ 16% {border-bottom: 54px solid #0099cc;} /*change*/ 35% {border-bottom: 54px solid #0099cc;} /*wait*/ 36% {border-bottom: 54px solid #ff6699;} /*change*/ 55% {border-bottom: 54px solid #ff6699;} /*wait*/ 56% {border-bottom: 54px solid #FFD720;} /*change*/ 75% {border-bottom: 54px solid #FFD720;} /*wait*/ 76% {border-bottom: 54px solid #0099cc;} /*change*/ 95% {border-bottom: 54px solid #0099cc;} /*wait*/ 96% {border-bottom: 54px solid #FFD720;} /*change*/
}
@-o-keyframes bgchm { 15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/ 16% {border-bottom: 54px solid #0099cc;} /*change*/ 35% {border-bottom: 54px solid #0099cc;} /*wait*/ 36% {border-bottom: 54px solid #ff6699;} /*change*/ 55% {border-bottom: 54px solid #ff6699;} /*wait*/ 56% {border-bottom: 54px solid #FFD720;} /*change*/ 75% {border-bottom: 54px solid #FFD720;} /*wait*/ 76% {border-bottom: 54px solid #0099cc;} /*change*/ 95% {border-bottom: 54px solid #0099cc;} /*wait*/ 96% {border-bottom: 54px solid #FFD720;} /*change*/
}
@keyframes bgchm { 15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/ 16% {border-bottom: 54px solid #0099cc;} /*change*/ 35% {border-bottom: 54px solid #0099cc;} /*wait*/ 36% {border-bottom: 54px solid #ff6699;} /*change*/ 55% {border-bottom: 54px solid #ff6699;} /*wait*/ 56% {border-bottom: 54px solid #FFD720;} /*change*/ 75% {border-bottom: 54px solid #FFD720;} /*wait*/ 76% {border-bottom: 54px solid #0099cc;} /*change*/ 95% {border-bottom: 54px solid #0099cc;} /*wait*/ 96% {border-bottom: 54px solid #FFD720;} /*change*/
}
/*CHEEKS*/
@-webkit-keyframes bgchch { 15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/ 16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/ 35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/ 36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/ 55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/ 56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/ 75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/ 76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/ 95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/ 96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}
@-moz-keyframes bgchch { 15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/ 16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/ 35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/ 36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/ 55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/ 56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/ 75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/ 76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/ 95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/ 96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}
@-o-keyframes bgchch { 15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/ 16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/ 35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/ 36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/ 55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/ 56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/ 75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/ 76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/ 95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/ 96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}
@keyframes bgchch { 15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/ 16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/ 35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/ 36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/ 55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/ 56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/ 75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/ 76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/ 95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/ 96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}
/*BLINK upper eyelid*/
@-webkit-keyframes blink { 74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;} 79% { margin-top: -50px;border-radius: 50% / 21%;} 83% { margin-top: -350px;}
}
@-moz-keyframes blink { 74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;} 79% { margin-top: -50px;border-radius: 50% / 21%;} 83% { margin-top: -350px;}
}
@-o-keyframes blink { 74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;} 79% { margin-top: -50px;border-radius: 50% / 21%;} 83% { margin-top: -350px;}
}
@keyframes blink { 74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;} 79% { margin-top: -50px;border-radius: 50% / 21%;} 83% { margin-top: -350px;}
}
/*BLINK lower eyelid*/
@-webkit-keyframes blink2 { 74.07407407407408% {margin-top: 0px; border-radius:50%;} 79% { margin-top: -50px;border-radius: 50% / 21%;} 83% {margin-top: 0px; border-radius:50%;}
}
@-moz-keyframes blink2 { 74.07407407407408% {margin-top: 0px; border-radius:50%;} 79% { margin-top: -50px;border-radius: 50% / 21%;} 83% {margin-top: 0px; border-radius:50%;}
}
@-o-keyframes blink2 { 74.07407407407408% {margin-top: 0px; border-radius:50%;} 79% { margin-top: -50px;border-radius: 50% / 21%;} 83% {margin-top: 0px; border-radius:50%;}
}
@keyframes blink2 { 74.07407407407408% {margin-top: 0px; border-radius:50%;} 79% { margin-top: -50px;border-radius: 50% / 21%;} 83% {margin-top: 0px; border-radius:50%;}
}
/*PUPILS eye:before*/
@-webkit-keyframes bgchPUP { 15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/ 16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/ 35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/ 36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/ 55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/ 56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/ 75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/ 76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/ 95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/ 96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}
@-moz-keyframes bgchPUP { 15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/ 16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/ 35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/ 36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/ 55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/ 56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/ 75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/ 76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/ 95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/ 96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}
@-o-keyframes bgchPUP { 15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/ 16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/ 35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/ 36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/ 55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/ 56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/ 75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/ 76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/ 95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/ 96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}
@keyframes bgchPUP { 15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/ 16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/ 35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/ 36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/ 55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/ 56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/ 75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/ 76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/ 95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/ 96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}
/*EYES*/
@-webkit-keyframes bgchEYE { 15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/ 16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/ 35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/ 36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/ 55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/ 56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/ 75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/ 76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/ 95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/ 96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}
@-moz-keyframes bgchEYE { 15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/ 16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/ 35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/ 36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/ 55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/ 56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/ 75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/ 76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/ 95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/ 96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}
@-o-keyframes bgchEYE { 15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/ 16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/ 35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/ 36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/ 55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/ 56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/ 75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/ 76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/ 95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/ 96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}
@keyframes bgchEYE { 15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/ 16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/ 35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/ 36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/ 55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/ 56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/ 75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/ 76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/ 95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/ 96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}
/*UNIVERSAL CHANGE*/
@-webkit-keyframes bgch { 15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/ 16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/ 35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/ 36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/ 55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/ 56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/ 75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/ 76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/ 95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/ 96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}
@-moz-keyframes bgch { 15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/ 16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/ 35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/ 36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/ 55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/ 56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/ 75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/ 76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/ 95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/ 96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}
@-o-keyframes bgch { 15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/ 16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/ 35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/ 36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/ 55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/ 56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/ 75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/ 76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/ 95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/ 96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}
@keyframes bgch { 15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/ 16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/ 35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/ 36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/ 55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/ 56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/ 75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/ 76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/ 95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/ 96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}
/*EYELIDS*/
@-webkit-keyframes bgchE { 15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/ 16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/ 35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/ 36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/ 55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/ 56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/ 75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/ 76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/ 95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/ 96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}
@-moz-keyframes bgchE { 15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/ 16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/ 35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/ 36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/ 55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/ 56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/ 75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/ 76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/ 95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/ 96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}
@-o-keyframes bgchE { 15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/ 16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/ 35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/ 36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/ 55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/ 56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/ 75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/ 76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/ 95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/ 96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}
@keyframes bgchE { 15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/ 16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/ 35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/ 36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/ 55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/ 56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/ 75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/ 76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/ 95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/ 96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}
| Developer | Mikhail Korotkov |
| Username | melawire |
| Uploaded | November 12, 2022 |
| Rating | 3.5 |
| Size | 3,452 Kb |
| Views | 14,168 |
Do you need developer help for Pokemon. Pikachu on acid css3 animation?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Mikhail Korotkov (melawire) Script Codes
| Name | Size |
| Login form page | 3,399 Kb |
| Contact form html5 css3 responsive | 3,053 Kb |
| Skateboards in pure CSS | 5,209 Kb |
| Cant get enough icecream in pure css3 | 4,322 Kb |
| Wind key, city logo. pure css | 2,406 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Popover | Teles | 2,248 Kb |
| P5.js data visualization | Enginarslan | 2,233 Kb |
| Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
| Fading Navigation Bar | J-w-v | 2,805 Kb |
| IE11 Test | Boostnewmedia | 4,998 Kb |
| Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
| E-mail Template | SoloMDFK | 4,871 Kb |
| BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
| Loading animation | Codeams | 2,408 Kb |
| Wikipedia Viewer | Codinger | 4,681 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!