Wake animation

Developer
Susanne Karin Lundblad
Size
4,322 Kb
Views
28,336
  1. Wake animation Previews
  2. Wake animation HTML Codes
  3. Wake animation CSS Codes

How do I make an wake animation?

Will be coming on the next version of wake.com. What is a wake animation? How do you make a wake animation? This script and codes were developed by Susanne Karin Lundblad on 13 September 2022, Tuesday.

Wake animation Previews
IQ Test

Wake animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wake animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
<svg width="135px" height="115px" viewBox="0 0 135 115" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg"> <defs> <rect id="path-1" x="0" y="0" width="115" height="65" rx="2"></rect> </defs> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="001"> <g id="Group-2-Copy-2"> <rect id="Rectangle" x="0" y="0" width="135" height="106"></rect> <g id="Group" transform="translate(10.000000, 40.000000)"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"></use> </mask> <use id="Rectangle-2" fill="#E5F1FF" xlink:href="#path-1"></use> <rect id="Rectangle-2-Copy-2" fill="#D2E6FF" mask="url(#mask-2)" x="0" y="0" width="16" height="65"></rect> <rect id="Rectangle-2-Copy-3" fill="#D2E6FF" mask="url(#mask-2)" x="99" y="0" width="16" height="65"></rect> <rect id="Rectangle-2-Copy" fill="#61A7FF" mask="url(#mask-2)" x="0" y="0" width="115" height="14"></rect> <circle id="Oval" fill="#E9BCFF" cx="58" cy="80" r="8"></circle> <rect id="Rectangle-3" fill="#000000" opacity="0.400000006" mask="url(#mask-2)" x="4" y="112" width="6" height="6" rx="3"></rect> <rect id="Rectangle-3-Copy" fill="#000000" opacity="0.400000006" mask="url(#mask-2)" x="12" y="112" width="6" height="6" rx="3"></rect> <rect id="Rectangle-3-Copy-2" fill="#000000" opacity="0.400000006" mask="url(#mask-2)" x="20" y="112" width="6" height="6" rx="3"></rect> </g> <path d="M52.9090358,29.6028908 C53.508361,28.6753637 54.4804245,28.6759292 55.0793843,29.6028908 L65.5090358,45.7440182 C66.108361,46.6715452 65.6973287,47.4234545 64.5957445,47.4234545 L43.3926755,47.4234545 C42.2889535,47.4234545 41.8804245,46.6709798 42.4793843,45.7440182 L52.9090358,29.6028908 Z" id="Triangle1" fill="#E4ABFF" transform="rotate(-60.000000)"></path>
<rect id="Rectangle-4" fill="#6A1D93" x="110" y="0" width="6" height="19" rx="1"></rect> <path d="M71,14.2 L69.3357605,14.8286599 C68.3022731,15.2190556 67.780969,14.6976617 68.1713401,13.6642395 L68.8,12 L68.1713401,10.3357605 C67.7809444,9.30227312 68.3023383,8.78096899 69.3357605,9.17134012 L71,9.80000001 L72.6642395,9.17134012 C73.6977269,8.78094438 74.219031,9.30233828 73.8286599,10.3357605 L73.2,12 L73.8286599,13.6642395 C74.2190556,14.6977269 73.6976617,15.219031 72.6642395,14.8286599 L71,14.2 Z" id="Star" fill="#C86EF2" transform="translate(71, 112) rotate(45) translate(-71.000000, -12.000000) "></path> <path d="M33,24.2 L31.3357605,24.8286599 C30.3022731,25.2190556 29.780969,24.6976617 30.1713401,23.6642395 L30.8,22 L30.1713401,20.3357605 C29.7809444,19.3022731 30.3023383,18.780969 31.3357605,19.1713401 L33,19.8 L34.6642395,19.1713401 C35.6977269,18.7809444 36.219031,19.3023383 35.8286599,20.3357605 L35.2,22 L35.8286599,23.6642395 C36.2190556,24.6977269 35.6976617,25.219031 34.6642395,24.8286599 L33,24.2 Z" id="Star-Copy" fill="#C86EF2"></path> <path d="M80.3383666,75.9444077 C80.9292593,75.0119106 81.8533874,75.0383655 82.3945238,75.9895388 L89.3978949,88.2995928 C89.9425865,89.2570151 89.4944703,90.0331592 88.3895254,90.0331592 L73.405411,90.0331592 C72.3038123,90.0331592 71.8929894,89.2721927 72.4806958,88.3447239 L80.3383666,75.9444077 Z" id="Triangle-test" fill="#C86EF2"></path> <rect id="Rectangle-42" fill="#6A1D93" transform="translate(82.846875, 27.846875) rotate(-10.000000) translate(-82.846875, -27.846875) " x="75.3468754" y="112" width="15" height="15" rx="1"></rect> <circle id="Oval-Copy" fill="#E7B2FF" cx="100" cy="116" r="8"></circle> <circle id="Oval-Copy-2" fill="#C86EF2" cx="33" cy="112" r="6"></circle> <rect id="Rectangle-43" fill="#ffffff" x="10" y="105" width="115" height="15" rx="1"></rect> </g> </g> </g>
</svg>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
</body>
</html>

Wake animation - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; position: relative;
}
.wrap { margin: 100px auto; display: block; width: 135px;
}
.svg { background: transparent;
}
#Symbols { overflow: hidden;
}
#Rectangle-2-Copy { position: relative; z-index: 1;
}
#Oval { z-index: 2; -webkit-animation: animationCircle 2s ease-in infinite; animation: animationCircle 2s ease-in infinite;
}
#Oval-Copy { -webkit-animation: animationCircleTwo 2s ease-in infinite 0.5s; animation: animationCircleTwo 2s ease-in infinite 0.5s;
}
#Oval-Copy-2 { -webkit-animation: animationCircleThree 2s ease-in infinite 1s; animation: animationCircleThree 2s ease-in infinite 1s;
}
#Rectangle-4 { -webkit-transform: translate(0px, 22px) rotate(50deg); transform: translate(0px, 22px) rotate(50deg); -webkit-animation: animationRec4 1.5s ease-in infinite 1s; animation: animationRec4 1.5s ease-in infinite 1s;
}
#Star-Copy { -webkit-transform: translate(33px, 74px) rotate(45deg); transform: translate(33px, 74px) rotate(45deg); -webkit-animation: animationStarOne 1.8s ease-in infinite 2s; animation: animationStarOne 1.8s ease-in infinite 2s;
}
#Triangle1 { -webkit-transform: translate(-5px, 140px) rotate(-60deg); transform: translate(-5px, 140px) rotate(-60deg); -webkit-animation: animationTriangle1 1.5s ease-in infinite 1.5s; animation: animationTriangle1 1.5s ease-in infinite 1.5s;
}
#Star { -webkit-transform: translate(29px, 53px) rotate(45deg); transform: translate(29px, 53px) rotate(45deg); -webkit-animation: animationStar 1.5s ease-in infinite 2.5s; animation: animationStar 1.5s ease-in infinite 2.5s;
}
#Triangle-test { -webkit-transform: translate(187px, 69px) rotate(110deg); transform: translate(187px, 69px) rotate(110deg); -webkit-animation: animationTriangle2 2s ease-in infinite 1s; animation: animationTriangle2 2s ease-in infinite 1s;
}
#Rectangle-42 { -webkit-transform: translate(-3px, 15px) rotate(-10deg); transform: translate(-3px, 15px) rotate(-10deg); -webkit-animation: animationRect4 2.5s ease-in infinite 2s; animation: animationRect4 2.5s ease-in infinite 2s;
}
@-webkit-keyframes animationCircle { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translateY(-115px); transform: translateY(-115px); }
}
@keyframes animationCircle { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translateY(-115px); transform: translateY(-115px); }
}
@-webkit-keyframes animationCircleTwo { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(-20px, -120px); transform: translate(-20px, -120px); }
}
@keyframes animationCircleTwo { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(-20px, -120px); transform: translate(-20px, -120px); }
}
@-webkit-keyframes animationCircleThree { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(15px, -115px); transform: translate(15px, -115px); }
}
@keyframes animationCircleThree { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(15px, -115px); transform: translate(15px, -115px); }
}
@-webkit-keyframes animationRec4 { 0% { -webkit-transform: translate(0px, 22px) rotate(50deg); transform: translate(0px, 22px) rotate(50deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(-5px, -75px) rotate(50deg); transform: translate(-5px, -75px) rotate(50deg); }
}
@keyframes animationRec4 { 0% { -webkit-transform: translate(0px, 22px) rotate(50deg); transform: translate(0px, 22px) rotate(50deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(-5px, -75px) rotate(50deg); transform: translate(-5px, -75px) rotate(50deg); }
}
@-webkit-keyframes animationStarOne { 0% { -webkit-transform: translate(33px, 104px) rotate(45deg); transform: translate(33px, 104px) rotate(45deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(50px, -27px) rotate(45deg); transform: translate(50px, -27px) rotate(45deg); }
}
@keyframes animationStarOne { 0% { -webkit-transform: translate(33px, 104px) rotate(45deg); transform: translate(33px, 104px) rotate(45deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(50px, -27px) rotate(45deg); transform: translate(50px, -27px) rotate(45deg); }
}
@-webkit-keyframes animationTriangle1 { 0% { -webkit-transform: translate(-5px, 140px) rotate(-60deg); transform: translate(-5px, 140px) rotate(-60deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(0px, 10px) rotate(-60deg); transform: translate(0px, 10px) rotate(-60deg); }
}
@keyframes animationTriangle1 { 0% { -webkit-transform: translate(-5px, 140px) rotate(-60deg); transform: translate(-5px, 140px) rotate(-60deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(0px, 10px) rotate(-60deg); transform: translate(0px, 10px) rotate(-60deg); }
}
@-webkit-keyframes animationStar { 0% { -webkit-transform: translate(29px, 53px) rotate(45deg); transform: translate(29px, 53px) rotate(45deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(25px, -45px) rotate(45deg); transform: translate(25px, -45px) rotate(45deg); }
}
@keyframes animationStar { 0% { -webkit-transform: translate(29px, 53px) rotate(45deg); transform: translate(29px, 53px) rotate(45deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(25px, -45px) rotate(45deg); transform: translate(25px, -45px) rotate(45deg); }
}
@-webkit-keyframes animationTriangle2 { 0% { -webkit-transform: translate(187px, 69px) rotate(110deg); transform: translate(187px, 69px) rotate(110deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(180px, -50px) rotate(110deg); transform: translate(180px, -50px) rotate(110deg); }
}
@keyframes animationTriangle2 { 0% { -webkit-transform: translate(187px, 69px) rotate(110deg); transform: translate(187px, 69px) rotate(110deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(180px, -50px) rotate(110deg); transform: translate(180px, -50px) rotate(110deg); }
}
@-webkit-keyframes animationRect4 { 0% { -webkit-transform: translate(-3px, 15px) rotate(-10deg); transform: translate(-3px, 15px) rotate(-10deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(-30px, -120px) rotate(-10deg); transform: translate(-30px, -120px) rotate(-10deg); }
}
@keyframes animationRect4 { 0% { -webkit-transform: translate(-3px, 15px) rotate(-10deg); transform: translate(-3px, 15px) rotate(-10deg); } 0%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } 100% { -webkit-transform: translate(-30px, -120px) rotate(-10deg); transform: translate(-30px, -120px) rotate(-10deg); }
}
Wake animation - Script Codes
Wake animation - Script Codes
Home Page Home
Developer Susanne Karin Lundblad
Username SusanneLundblad
Uploaded September 13, 2022
Rating 3.5
Size 4,322 Kb
Views 28,336
Do you need developer help for Wake 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!

Susanne Karin Lundblad (SusanneLundblad) Script Codes
Name
A Pen by Susanne Karin Lundblad
AngularJS, showing and hiding content using radio buttons
Loading animation
Flying pinata
Css-ninja
Css man
Floating element with shadow
Button shaking
Getting username from email adress
Blend mode of text
Create amazing captions 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!