Hypnotic animation
How do I make an hypnotic animation?
Animated dots and squares.... What is a hypnotic animation? How do you make a hypnotic animation? This script and codes were developed by Josep Llodrà on 19 January 2023, Thursday.
Hypnotic animation Previews
Hypnotic animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hypnotic animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- watch full version: https://codepen.io/jllodra/full/nKzla/-->
<div class="a"> <div class="b"> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> <div class="b4"></div> <div class="b5"></div> <div class="b6"></div> <div class="b7"></div> <div class="b8"></div> <div class="b9"></div> <div class="b10"></div> <div class="b11"></div> <div class="b12"></div> <div class="b13"></div> <div class="b14"></div> <div class="b15"></div> <div class="b16"></div> <div class="b17"></div> <div class="b18"></div> <div class="b19"></div> <div class="b20"></div> <div class="b21"></div> <div class="b22"></div> <div class="b23"></div> <div class="b24"></div> <div class="b25"></div> <div class="b26"></div> <div class="b27"></div> <div class="b28"></div> <div class="b29"></div> <div class="b30"></div> <div class="b31"></div> <div class="b32"></div> <div class="b33"></div> <div class="b34"></div> <div class="b35"></div> <div class="b36"></div> <div class="b37"></div> <div class="b38"></div> <div class="b39"></div> </div>
</div>
</body>
</html>
Hypnotic animation - Script Codes CSS Codes
body { overflow: hidden;
}
.b { position: relative; left: 550px; top: 275px; width: 25px; height: 25px;
}
@-webkit-keyframes anim { 0% { -webkit-transform: scale(3) skew(-180deg, 180deg) rotate(360deg); transform: scale(3) skew(-180deg, 180deg) rotate(360deg); } 100% { -webkit-transform: scale(-1) skew(180deg, -180deg) rotate(0deg); transform: scale(-1) skew(180deg, -180deg) rotate(0deg); }
}
@keyframes anim { 0% { -webkit-transform: scale(3) skew(-180deg, 180deg) rotate(360deg); transform: scale(3) skew(-180deg, 180deg) rotate(360deg); } 100% { -webkit-transform: scale(-1) skew(180deg, -180deg) rotate(0deg); transform: scale(-1) skew(180deg, -180deg) rotate(0deg); }
}
@-webkit-keyframes anim2 { 0% { border-radius: 0%; } 100% { border-radius: 100%; }
}
@keyframes anim2 { 0% { border-radius: 0%; } 100% { border-radius: 100%; }
}
@-webkit-keyframes anim3 { 0% { opacity: 0.75; } 50% { opacity: 1; } 100% { opacity: 0.4; }
}
@keyframes anim3 { 0% { opacity: 0.75; } 50% { opacity: 1; } 100% { opacity: 0.4; }
}
html { background: -webkit-linear-gradient(#32cd32, rgba(0, 0, 0, 0)), -webkit-linear-gradient(left, #87ceeb, rgba(0, 0, 0, 0)), -webkit-linear-gradient(right, #ff7f50, rgba(0, 0, 0, 0)); background: linear-gradient(#32cd32, rgba(0, 0, 0, 0)), linear-gradient(90deg, #87ceeb, rgba(0, 0, 0, 0)), linear-gradient(-90deg, #ff7f50, rgba(0, 0, 0, 0)); background-blend-mode: screen; height: 100%; width: 100%;
}
@-webkit-keyframes sc { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 50% { -webkit-transform: scale(3) rotate(180deg); transform: scale(3) rotate(180deg); } 100% { -webkit-transform: scale(0.3) rotate(360deg); transform: scale(0.3) rotate(360deg); }
}
@keyframes sc { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 50% { -webkit-transform: scale(3) rotate(180deg); transform: scale(3) rotate(180deg); } 100% { -webkit-transform: scale(0.3) rotate(360deg); transform: scale(0.3) rotate(360deg); }
}
.a { -webkit-transform-origin: 650px 275px; transform-origin: 650px 275px; -webkit-animation-name: sc, anim3; animation-name: sc, anim3; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;
}
.b div { background-color: blue; position: absolute; -webkit-animation-name: anim, anim2; animation-name: anim, anim2; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; box-shadow: 0px 0px 40px 3px #444;
}
.b1 { left: -25px; width: 25px; height: 25px; -webkit-transform-origin: 37.5px 12.5px; transform-origin: 37.5px 12.5px; -webkit-animation-delay: 100ms; animation-delay: 100ms; background-color: #ff5e00 !important;
}
.b2 { left: -50px; width: 25px; height: 25px; -webkit-transform-origin: 62.5px 12.5px; transform-origin: 62.5px 12.5px; -webkit-animation-delay: 200ms; animation-delay: 200ms; background-color: #ff8800 !important;
}
.b3 { left: -75px; width: 25px; height: 25px; -webkit-transform-origin: 87.5px 12.5px; transform-origin: 87.5px 12.5px; -webkit-animation-delay: 300ms; animation-delay: 300ms; background-color: #ffb300 !important;
}
.b4 { left: -100px; width: 25px; height: 25px; -webkit-transform-origin: 112.5px 12.5px; transform-origin: 112.5px 12.5px; -webkit-animation-delay: 400ms; animation-delay: 400ms; background-color: #ffdd00 !important;
}
.b5 { left: -125px; width: 25px; height: 25px; -webkit-transform-origin: 137.5px 12.5px; transform-origin: 137.5px 12.5px; -webkit-animation-delay: 500ms; animation-delay: 500ms; background-color: #f7ff00 !important;
}
.b6 { left: -150px; width: 25px; height: 25px; -webkit-transform-origin: 162.5px 12.5px; transform-origin: 162.5px 12.5px; -webkit-animation-delay: 600ms; animation-delay: 600ms; background-color: #ccff00 !important;
}
.b7 { left: -175px; width: 25px; height: 25px; -webkit-transform-origin: 187.5px 12.5px; transform-origin: 187.5px 12.5px; -webkit-animation-delay: 700ms; animation-delay: 700ms; background-color: #a2ff00 !important;
}
.b8 { left: -200px; width: 25px; height: 25px; -webkit-transform-origin: 212.5px 12.5px; transform-origin: 212.5px 12.5px; -webkit-animation-delay: 800ms; animation-delay: 800ms; background-color: #77ff00 !important;
}
.b9 { left: -225px; width: 25px; height: 25px; -webkit-transform-origin: 237.5px 12.5px; transform-origin: 237.5px 12.5px; -webkit-animation-delay: 900ms; animation-delay: 900ms; background-color: #4dff00 !important;
}
.b10 { left: -250px; width: 25px; height: 25px; -webkit-transform-origin: 262.5px 12.5px; transform-origin: 262.5px 12.5px; -webkit-animation-delay: 1000ms; animation-delay: 1000ms; background-color: #22ff00 !important;
}
.b11 { left: 25px; width: 25px; height: 25px; -webkit-transform-origin: -12.5px 12.5px; transform-origin: -12.5px 12.5px; -webkit-animation-delay: 100ms; animation-delay: 100ms; background-color: #ff5e00 !important;
}
.b12 { left: 50px; width: 25px; height: 25px; -webkit-transform-origin: -37.5px 12.5px; transform-origin: -37.5px 12.5px; -webkit-animation-delay: 200ms; animation-delay: 200ms; background-color: #ff8800 !important;
}
.b13 { left: 75px; width: 25px; height: 25px; -webkit-transform-origin: -62.5px 12.5px; transform-origin: -62.5px 12.5px; -webkit-animation-delay: 300ms; animation-delay: 300ms; background-color: #ffb300 !important;
}
.b14 { left: 100px; width: 25px; height: 25px; -webkit-transform-origin: -87.5px 12.5px; transform-origin: -87.5px 12.5px; -webkit-animation-delay: 400ms; animation-delay: 400ms; background-color: #ffdd00 !important;
}
.b15 { left: 125px; width: 25px; height: 25px; -webkit-transform-origin: -112.5px 12.5px; transform-origin: -112.5px 12.5px; -webkit-animation-delay: 500ms; animation-delay: 500ms; background-color: #f7ff00 !important;
}
.b16 { left: 150px; width: 25px; height: 25px; -webkit-transform-origin: -137.5px 12.5px; transform-origin: -137.5px 12.5px; -webkit-animation-delay: 600ms; animation-delay: 600ms; background-color: #ccff00 !important;
}
.b17 { left: 175px; width: 25px; height: 25px; -webkit-transform-origin: -162.5px 12.5px; transform-origin: -162.5px 12.5px; -webkit-animation-delay: 700ms; animation-delay: 700ms; background-color: #a2ff00 !important;
}
.b18 { left: 200px; width: 25px; height: 25px; -webkit-transform-origin: -187.5px 12.5px; transform-origin: -187.5px 12.5px; -webkit-animation-delay: 800ms; animation-delay: 800ms; background-color: #77ff00 !important;
}
.b19 { left: 225px; width: 25px; height: 25px; -webkit-transform-origin: -212.5px 12.5px; transform-origin: -212.5px 12.5px; -webkit-animation-delay: 900ms; animation-delay: 900ms; background-color: #4dff00 !important;
}
.b20 { left: 250px; width: 25px; height: 25px; -webkit-transform-origin: -237.5px 12.5px; transform-origin: -237.5px 12.5px; -webkit-animation-delay: 1000ms; animation-delay: 1000ms; background-color: #22ff00 !important;
}
.b21 { bottom: -25px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px -12.5px; transform-origin: 12.5px -12.5px; -webkit-animation-delay: 100ms; animation-delay: 100ms; background-color: #ff5e00 !important;
}
.b22 { bottom: -50px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px -37.5px; transform-origin: 12.5px -37.5px; -webkit-animation-delay: 200ms; animation-delay: 200ms; background-color: #ff8800 !important;
}
.b23 { bottom: -75px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px -62.5px; transform-origin: 12.5px -62.5px; -webkit-animation-delay: 300ms; animation-delay: 300ms; background-color: #ffb300 !important;
}
.b24 { bottom: -100px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px -87.5px; transform-origin: 12.5px -87.5px; -webkit-animation-delay: 400ms; animation-delay: 400ms; background-color: #ffdd00 !important;
}
.b25 { bottom: -125px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px -112.5px; transform-origin: 12.5px -112.5px; -webkit-animation-delay: 500ms; animation-delay: 500ms; background-color: #f7ff00 !important;
}
.b26 { bottom: -150px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px -137.5px; transform-origin: 12.5px -137.5px; -webkit-animation-delay: 600ms; animation-delay: 600ms; background-color: #ccff00 !important;
}
.b27 { bottom: -175px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px -162.5px; transform-origin: 12.5px -162.5px; -webkit-animation-delay: 700ms; animation-delay: 700ms; background-color: #a2ff00 !important;
}
.b28 { bottom: -200px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px -187.5px; transform-origin: 12.5px -187.5px; -webkit-animation-delay: 800ms; animation-delay: 800ms; background-color: #77ff00 !important;
}
.b29 { bottom: -225px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px -212.5px; transform-origin: 12.5px -212.5px; -webkit-animation-delay: 900ms; animation-delay: 900ms; background-color: #4dff00 !important;
}
.b30 { bottom: -250px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px -237.5px; transform-origin: 12.5px -237.5px; -webkit-animation-delay: 1000ms; animation-delay: 1000ms; background-color: #22ff00 !important;
}
.b31 { bottom: 25px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px 37.5px; transform-origin: 12.5px 37.5px; -webkit-animation-delay: 100ms; animation-delay: 100ms; background-color: #ff5e00 !important;
}
.b32 { bottom: 50px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px 62.5px; transform-origin: 12.5px 62.5px; -webkit-animation-delay: 200ms; animation-delay: 200ms; background-color: #ff8800 !important;
}
.b33 { bottom: 75px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px 87.5px; transform-origin: 12.5px 87.5px; -webkit-animation-delay: 300ms; animation-delay: 300ms; background-color: #ffb300 !important;
}
.b34 { bottom: 100px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px 112.5px; transform-origin: 12.5px 112.5px; -webkit-animation-delay: 400ms; animation-delay: 400ms; background-color: #ffdd00 !important;
}
.b35 { bottom: 125px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px 137.5px; transform-origin: 12.5px 137.5px; -webkit-animation-delay: 500ms; animation-delay: 500ms; background-color: #f7ff00 !important;
}
.b36 { bottom: 150px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px 162.5px; transform-origin: 12.5px 162.5px; -webkit-animation-delay: 600ms; animation-delay: 600ms; background-color: #ccff00 !important;
}
.b37 { bottom: 175px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px 187.5px; transform-origin: 12.5px 187.5px; -webkit-animation-delay: 700ms; animation-delay: 700ms; background-color: #a2ff00 !important;
}
.b38 { bottom: 200px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px 212.5px; transform-origin: 12.5px 212.5px; -webkit-animation-delay: 800ms; animation-delay: 800ms; background-color: #77ff00 !important;
}
.b39 { bottom: 225px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px 237.5px; transform-origin: 12.5px 237.5px; -webkit-animation-delay: 900ms; animation-delay: 900ms; background-color: #4dff00 !important;
}
.b40 { bottom: 250px; width: 25px; height: 25px; -webkit-transform-origin: 12.5px 262.5px; transform-origin: 12.5px 262.5px; -webkit-animation-delay: 1000ms; animation-delay: 1000ms; background-color: #22ff00 !important;
}
| Developer | Josep Llodrà |
| Username | jllodra |
| Uploaded | January 19, 2023 |
| Rating | 3.5 |
| Size | 4,016 Kb |
| Views | 10,120 |
Do you need developer help for Hypnotic 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!
Josep Llodrà (jllodra) Script Codes
| Name | Size |
| Drawing a tree | 2,269 Kb |
| Boxes with css arrows | 3,121 Kb |
| Mesmerizing octopus | 3,549 Kb |
| Designed by Apple in California | 2,319 Kb |
| Rolling dice | 1,889 Kb |
| 3D Pythagoras tree | 3,678 Kb |
| Dielectric breakdown model | 3,295 Kb |
| Twisted text | 3,072 Kb |
| Circle illusion | 3,735 Kb |
| A worm in the sand | 3,577 Kb |
Create amazing marketing copy 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 |
| Multi-step GSAP animation | Acacheung | 2,668 Kb |
| Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
| Svg animation draw | SzymonDziewonski | 5,545 Kb |
| Playing with FlexBox | _Billy_Brown | 3,162 Kb |
| Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
| Loading animation - freedom purchase | Rocbear | 2,567 Kb |
| Nested table email layout | Massimo-cassandro | 2,355 Kb |
| Sticky div | Kaslab | 2,225 Kb |
| ASCII triangle image overlay | Mitchdot | 2,200 Kb |
| Myprofile | SoufianeAbid | 2,451 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!