"Gradient background animation"
Bootstrap 4.1.1 Snippet by Hoss

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.11.9/jquery.velocity.min.js"></script> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"> <linearGradient id="background" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> <stop id="one" offset="0%" stop-color="crimson"/> <stop id="two" offset="100%" stop-color="cyan"/> </linearGradient> <rect id="rect" width="100%" height="100%" fill="url(#background)"/> <g cursor="pointer" id="group" opacity="0"> <a xlink:href="http://uigradients.com/" target="_blank"> <text class="texto-tittle" id="texto" x="0" y="300">uiGradients</text> </a> <a xlink:href="https://github.com/Ghosh/uiGradients" target="_blank"> <g transform="translate(255,272)"> <circle r="16" cx="16" cy="16" fill="white"/> <path fill="black" d="M16,0C7.2,0,0,7.2,0,16c0,7.1,4.6,13.1,11,15.2 c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.7,2.5,1.7c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3 c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5c3.1-2.1,4.4-1.6,4.4-1.6 c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.2-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4 c0,0.4,0.3,0.9,1.1,0.8C27.4,29.1,32,23.1,32,16C32,7.2,24.9,0,16,0z"/> </g> </a> </g> </svg> <script> $("#texto") .delay(10500) .velocity({x: 70 },{duration:500, easing: "easeInSine"}); $("#group") .delay(10500) .velocity({opacity: 1 },{duration:3000, easing: "ease-in"}); $("#background") .delay(500) .velocity({x2: "100%", y2: "0%" },{duration:3500, easing: "linear"}) .delay(500) .velocity({x2: "0%", y2: "100%" },{duration:3500, easing: "linear"}) .delay(500) .velocity({x1: "50%", y2: "0%" },{duration:3500, easing: "linear"}) .delay(500) .velocity({x1: "0%", y2: "100%" },{duration:3500, easing: "linear"}) .delay(500) .velocity({x2: "100%", y2: "0%" },{duration:3500, easing: "linear"}); $("#one") .delay(1500) .velocity({stopColor: "#FF4E50" },{duration:3500, easing: "linear"}) .delay(500) .velocity({stopColor: "#556270" },{duration:3500, easing: "swing"}) .delay(500) .velocity({stopColor: "#F0C27B" },{duration:3500, easing: "linear"}) .delay(500) .velocity({stopColor: "#000000" },{duration:3500, easing: "swing"}) .delay(500) .velocity({stopColor: "#ED4264" },{duration:3500, easing: "linear"}); $("#two") .delay(1500) .velocity({stopColor: "#F9D423" },{duration:3500, easing: "linear"}) .delay(500) .velocity({stopColor: "#FF6B6B" },{duration:3500, easing: "swing"}) .delay(500) .velocity({stopColor: "#4B1248" },{duration:3500, easing: "linear"}) .delay(500) .velocity({stopColor: "#e74c3c" },{duration:3500, easing: "swing"}) .delay(500) .velocity({stopColor: "#FFEDBC" },{duration:3500, easing: "linear"}); </script>
@import url(https://fonts.googleapis.com/css?family=Playball|Open+Sans+Condensend:300); body { background-color: snow; } html, body, svg { margin: 0; width: 100%; height: 100%; } .texto-tittle { font-family: 'Playball', cursive; font-size: 40px; fill: snow; } .texto-by { font-family: 'Open Sans Condensed', sans-serif; font-size: 12px; fill: snow; letter-spacing: 1px; opacity: .8; }

Related: See More


Questions / Comments: