Learn Animation

Developer
Mfcastro
Size
3,142 Kb
Views
4,048
  1. Learn Animation Previews
  2. Learn Animation HTML Codes
  3. Learn Animation CSS Codes

How do I make an learn animation?

What is a learn animation? How do you make a learn animation? This script and codes were developed by Mfcastro on 20 January 2023, Friday.

Learn Animation Previews
IQ Test

Learn Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Learn Animation</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.0/css/hover-min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='box'> <h1> 123 </h1>
</div>
<div class="startingBLocks hvr-sweep-to-right"></div>
<section>
<div class="b "> </div> <div class="b "></div> <div class="b "></div> <div class="b "></div> <div class="b "></div> <div class="b "></div>
</section>
<div> <i class="fa fa-pencil pen fa-5x"></i>
</div>
<div class="spinner">
</div>
<div class="spinFast"></div>
<div style="position:relative; left: 300px;">
<i class="fa fa-spoon fa-5x mySpoon"></i>
</div>
</body>
</html>

Learn Animation - Script Codes CSS Codes

.box { background-color: red; height: 100px; width: 100px; transform: rotate(45deg) rotatex(180deg) skew(10deg, 45deg) scale(2.75) translate(150px, -100px);
}
.box:after { content: "123123123"; height: 100px; width: 100px; background-color: lightblue; transform: rotateX(90deg);
}
.box:hover { background-color: rgba(10, 255, 160, 0.7); color: rgba(0, 200, 255, 0.75); transition: all .50s;
}
.box:hover:after { content: "?????????"; background-color: rgba(255, 0, 0, 0.5);
}
.box > h1 { margin: auto; width: 50%; padding: 27px;
}
.startingBLocks { border: 1px dashed gray; height: 100px; width: 100px; position: relative; bottom: 101px; left: -1px;
}
section { position: relative; padding-top: 100px;
}
.b { height: 100px; width: 100px; transition: all 1.5s; display: inline-block; background-color: blue;
}
.b:nth-child(odd):hover { transform: rotatey(180deg); background-color: #00e600;
}
.b:nth-child(even):hover { transform: rotatex(180deg); background-color: #ff6666;
}
.pen { position: relative; left: 200px; top: 100px; transition: all 1s; transform-origin: bottom left;
}
.pen:hover { transform: rotateX(100deg) scale(5);
}
.spinner { height: 100px; width: 100px; background-color: green; -webkit-animation: spinMe 3s infinite; -moz-animation: spinMe 3s infinite; animation: spinMe 3s infinite;
}
@keyframes spinMe { 0% { transform: rotateX(0deg); } 25% { transform: rotateX(180deg); } 50% { transform: rotate(180deg); } 100% { transform: rotateY(180deg); }
}
.spinFast { height: 100px; width: 100px; background-color: orange; -webkit-animation: spinFast 1.25s infinite; -moz-animation: spinFast 1.25s infinite; animation: spinFast 1.25s infinite;
}
@keyframes spinFast { 0% { transform: rotateY(0deg); } 15% { transform: rotate(20deg); } 30% { transform: rotate(40deg); } 50% { transform: rotate(100deg); } 75% { transform: rotate(180deg); } 100% { transform: rotate(365deg); }
}
.mySpoon { transform: scale(-1) rotate(45deg); transform-origin: top right; -webkit-animation: spinSpoon 5s infinite; animation: spinSpoon 5s infinite;
}
@keyframes spinSpoon { 0% { transform: scale(-1) rotatey(45deg); } 25 { transform: scale(-1) rotatey(90deg); } 50% { transform: scale(-1) rotatey(180deg); } 75% { transform: scale(-1) rotatey(365deg); } 100% { transform: scale(-1) rotatey(0deg); }
}
Learn Animation - Script Codes
Learn Animation - Script Codes
Home Page Home
Developer Mfcastro
Username marcocastro
Uploaded January 20, 2023
Rating 3
Size 3,142 Kb
Views 4,048
Do you need developer help for Learn 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!

Mfcastro (marcocastro) Script Codes
Name
RWD- Mostly Fluid Layout Pattern
V2
Workbench
Ng-if
Random Quote Machine
A Pen by Mfcastro
Dashboard
Create amazing art & images 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!