Full-page Animation Project - Part 3

Developer
Fezzik
Size
2,111 Kb
Views
12,144
  1. Full-page Animation Project - Part 3 Previews
  2. Full-page Animation Project - Part 3 HTML Codes
  3. Full-page Animation Project - Part 3 CSS Codes

How do I make an full-page animation project - part 3?

What is a full-page animation project - part 3? How do you make a full-page animation project - part 3? This script and codes were developed by Fezzik on 25 November 2022, Friday.

Full-page Animation Project - Part 3 Previews
IQ Test

Full-page Animation Project - Part 3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full-page Animation Project - Part 3</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>
<head>	<title>Tugboat Animation</title>	<link rel="stylesheet" href="main.css">	<link rel="stylesheet" href="animation.css">
</head>
<body> <h1>Full-Page Animation Project - Part 3</h1>	<div class="boat">	<img src="https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/boat.png" alt="tugboat"" alt="tugboat">	</div>	<img class="mike" src="https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/mike.png">
</body>
</html>
</body>
</html>

Full-page Animation Project - Part 3 - Script Codes CSS Codes

body {	background: #F0FCFF url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/island.png') repeat-x 100% -460px;	background-size: 780px;
}
h1 { font-family: sans-serif; text-align: center; }
.boat {	width: 380px;	position: absolute;	top: 40%;	left: 35%;
}
.boat img {	width: 100%;
}
.boat::after {	content: "";	display: block;	width: 120px;	height: 120px;	background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/steam.png') no-repeat;	background-size: 120px;	position: absolute;	top: -25%;	left: 5%;	opacity: 0;
}
.mike {	width: 180px;	position: absolute;	top: 55%;	left: -15%;	-webkit-transform: rotateZ(-5deg);
}
/*	Animations - WebKit only
------------------------------------------ */
.boat {	-webkit-animation: rock-boat 3s ease-in-out infinite;
}
.boat::after {	-webkit-animation: steam 4s 2s infinite;
}
body {	-webkit-animation: bg-move 8s ease-out forwards; /* -webkit-animation-play-state: paused; */
}
.mike { -webkit-animation: mike-move 6s 6s ease-out forwards, mike-float 3.2s infinite;
}
/*	Keyframes - WebKit only
------------------------------------------ */
@-webkit-keyframes rock-boat {	50% { -webkit-transform: rotate(-5deg) translateY(-10px); }
}
@-webkit-keyframes steam {	40%,	60% { opacity: 1; }	100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}
@-webkit-keyframes bg-move {	0% { background-position: 100% -560px; }	100% { background-position: -350% -460px; }
}
@-webkit-keyframes mike-move { 100% { left: 12%; }
}
@-webkit-keyframes mike-float { 50% { -webkit-transform: rotateZ(5deg); translateY(-5px); }
}
Full-page Animation Project - Part 3 - Script Codes
Full-page Animation Project - Part 3 - Script Codes
Home Page Home
Developer Fezzik
Username Fezzik
Uploaded November 25, 2022
Rating 3
Size 2,111 Kb
Views 12,144
Do you need developer help for Full-page Animation Project - Part 3?

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!

Fezzik (Fezzik) Script Codes
Name
Floats and Micro Clearfix Hack
Box Shadows
Print Stylesheets
Full-page Animation Project - Part 1
Transitions - Part 2
3D Transforms - Part 1
3D Transforms - Part 2
Keyframe Rules and Animation Properties
Flexbox - Part 1
Flexbox - Part 2
Create amazing blog posts 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!