Full-page Animation Project - Part 1

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

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

Animation-iteration-count: infinite;. What is a full-page animation project - part 1? How do you make a full-page animation project - part 1? This script and codes were developed by Fezzik on 25 November 2022, Friday.

Full-page Animation Project - Part 1 Previews
IQ Test

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

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full-page Animation Project - Part 1</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 1</h1>	<div class="boat">	<img src="https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/boat.png" 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 1 - 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; /* Opacity of 0 makes it so we don't see the steam right away. The steam element is hidden. */
}
.mike {	width: 180px;	position: absolute;	top: 55%;	left: -15%;	-webkit-transform: rotateZ(-5deg);	-moz-transform: rotateZ(-5deg);	-o-transform: rotateZ(-5deg);	-ms-transform: rotateZ(-5deg);	transform: rotateZ(-5deg);
}
/*	Animations - WebKit only
------------------------------------------ */
.boat { -webkit-animation: rock-boat 3s ease-in-out; -webkit-animation-iteration-count: infinite;
}
.boat::after { /* animation: [name of animation] [duration] [delay] [iteration count]; */ -webkit-animation: steam 4s 2s infinite;
}
/*	Keyframes - WebKit only
------------------------------------------ */
@-webkit-keyframes rock-boat { /* { -webkit-transform: rotate(0) translateY(0); } // Defaults to 0 so this declaration is not necessary. */ 50% { -webkit-transform: rotate(-5deg) translateY(-10px); } /* 100% { -webkit-transform: rotate(0) translateY(0); } // Defaults to 0 so this declaration is not necessary. */
}
@-webkit-keyframes steam { 40%, 60% { opacity: 1; } 100% {-webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}
Full-page Animation Project - Part 1 - Script Codes
Full-page Animation Project - Part 1 - Script Codes
Home Page Home
Developer Fezzik
Username Fezzik
Uploaded November 25, 2022
Rating 3
Size 2,178 Kb
Views 12,144
Do you need developer help for Full-page Animation Project - Part 1?

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
Advanced Backgrounds
UI Element States Pseudo-Classes
Device-Specific Media Queries - Part 1
Box Shadows
Flexbox - Part 2
Multi-Column Layout
Media Features and Media Types
Flexbox - Part 1
Print Stylesheets
Keyframe Rules and Animation Properties
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!