Negative Animation Delays

Developer
Vikas Chauhan
Size
1,876 Kb
Views
56,672
  1. Negative Animation Delays Previews
  2. Negative Animation Delays HTML Codes
  3. Negative Animation Delays CSS Codes

How do I make an negative animation delays?

As explained by Zach Saucier.. What is a negative animation delays? How do you make a negative animation delays? This script and codes were developed by Vikas Chauhan on 27 August 2022, Saturday.

Negative Animation Delays Previews
IQ Test

Negative Animation Delays - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Negative Animation Delays</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

Negative Animation Delays - Script Codes CSS Codes

div { border-radius:50%; position:absolute; top:50%; left:75%; position: absolute; bottom: 0; padding-left: 0.5em; margin-bottom: 0.3em;
}
div:nth-of-type(11) { background-color:black; height:10px; width:10px; margin-top:-5px; margin-left:-5px; -webkit-animation:slide 3s ease-in-out infinite; animation:slide 3s ease-in-out infinite;
}
div:nth-of-type(10) { background-color:#FF8100; height:20px; width:20px; margin-top:-12px; margin-left:-12px; -webkit-animation:slide 3s -2.7s ease-in-out infinite; animation:slide 3s -2.7s ease-in-out infinite;
}
div:nth-of-type(9) { background-color:#FF5800; height:40px; width:40px; margin-top:-20px; margin-left:-20px; -webkit-animation:slide 3s -2.4s ease-in-out infinite; animation:slide 3s -2.4s ease-in-out infinite;
}
div:nth-of-type(8) { background-color:#50B517; height:60px; width:60px; margin-top:-32px; margin-left:-32px; -webkit-animation:slide 3s -2.1s ease-in-out infinite; animation:slide 3s -2.1s ease-in-out infinite;
}
div:nth-of-type(7) { background-color:#FF3BA7; height:80px; width:80px; margin-top:-40px; margin-left:-40px; -webkit-animation:slide 3s -1.8s ease-in-out infinite; animation:slide 3s -1.8s ease-in-out infinite;
}
div:nth-of-type(6) { background-color:#CC42A2; height:100px; width:100px; margin-top:-52px; margin-left:-52px; -webkit-animation:slide 3s -1.5s ease-in-out infinite; animation:slide 3s -1.5s ease-in-out infinite;
}
div:nth-of-type(5) { background-color:#9f49ac; height:120px; width:120px; margin-top:-60px; margin-left:-60px; -webkit-animation:slide 3s -1.2s ease-in-out infinite; animation:slide 3s -1.2s ease-in-out infinite;
}
div:nth-of-type(4) { background-color:#476EAF; height:140px; width:140px; margin-top:-72px; margin-left:-72px; -webkit-animation:slide 3s -0.9s ease-in-out infinite; animation:slide 3s -0.9s ease-in-out infinite;
}
div:nth-of-type(3) { background-color:#179067; height:160px; width:160px; margin-top:-80px; margin-left:-80px; -webkit-animation:slide 3s -0.6s ease-in-out infinite; animation:slide 3s -0.6s ease-in-out infinite;
}
div:nth-of-type(2) { background-color:#50B517; height:180px; width:180px; margin-top:-92px; margin-left:-92px; -webkit-animation:slide 3s -0.3s ease-in-out infinite; animation:slide 3s -0.3s ease-in-out infinite;
}
div:nth-of-type(1) { background-color:#9ED110; height:200px; width:200px; margin-top:-100px; margin-left:-100px; -webkit-animation:slide 3s ease-in-out infinite; animation:slide 3s ease-in-out infinite;
}
@keyframes slide { 0% { left:75% } 50% { left:25%; } 100% { left:75%; }
}
@-webkit-keyframes slide { 0% { left:75% } 50% { left:25%; } 100% { left:75%; }
}
Negative Animation Delays - Script Codes
Negative Animation Delays - Script Codes
Home Page Home
Developer Vikas Chauhan
Username vikasford
Uploaded August 27, 2022
Rating 3
Size 1,876 Kb
Views 56,672
Do you need developer help for Negative Animation Delays?

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!

Vikas Chauhan (vikasford) Script Codes
Name
A form arranged using automatic placement.
A Pen by Vikas Chauhan
Transform
Code from CSS-Crash-Course
Box
Css3 button
Bootstrap Layout
CSS MENU
Working with Ink Framework. It is very good.
Animated css menu
Create amazing love letters 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!