HTML Introduction Learning Da08 Notes

css animation

I. Realizing Animation Style

       @keyframes Animation name{
			from {

			}
			to{

			}
		}

Or = = = "

        @ keyframes animation name{
			10% {
				
			}
			20%{

			}
			...
			100%{

			}
		}

II. Animation Applications

animation-name: animation name;

animation-name:xiyouji;

animation-duration: animation duration

5s;

animation-delay: Delay of animation

1s

 animation-direction

reverse / alternate

animation-fill-mode: Which style to keep after animation

forwards. Retain the style of the last frame / backwards retain the style of the first frame

animation-iteration-count: Number of animation executions

4 / infinite

animation-timing-function: Time curve of animation execution

linear / steps

animation-play-state:; animation playback status

running / paused

animation: sketch form 

animation: 4s linear 0s infinite alternate move_eye

Third-party animation library (animate.css)

It encapsulates the general animation style of css3 and is highly professional.

Recommend
https://daneden.github.io/animate.css/

  1. Introducing Animation Library
  2. Adding class to the element

4. Attached with "Breathing Lamp" and "Dream Journey to the West" animation code

1. Breathing lamp

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Internal breathing lamp</title>
	<style>
		div {
			box-sizing: border-box;
		}
		/*container*/
		.container {
			width: 300px;
			height: 500px;
			background-color: #666;
			margin: 0 auto;
		}
		/*Square*/
		.container > .box {
			height: 300px;
			padding: 10px;

			animation-name: x;
			animation-duration: 9s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}
		/*Outer circle*/
		.container > .box > .outer {
			height: 100%;
			border-radius: 50%;
			border:5px solid #ededed;
			padding: 30px;

			animation-name: y;
			animation-duration: 9s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}

		/*Inner circle*/
		.container > .box > .outer > .inner {
			height: 100%;
			border-radius: 50%;
			border: 10px solid #ccc;
		}

		/*Animation definition*/
		@keyframes x {
			25%{
				padding: 20px;
			}
			50% {
				padding: 30px;
			}
			100%{
				padding: 30px;
			}
		}

		@keyframes y {
			25% {
				padding: 40px;
			}
			50% {
				padding: 30px;
			}
			75% {
				padding: 42px;
			}
			100%{
				padding: 30px;
			}
		}

	</style>
</head>
<body>
	<div class="container">
		<div class="box">
			<div class="outer">
				<div class="inner"></div>
			</div>
		</div>
	</div>
</body>
</html>

Design sketch:

2. A Dream Journey to the West

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Fantasy Westward Journey</title>
	<link rel="stylesheet" href="../common.css">
	<style>
		.content {
			position: absolute;
			width: 950px;
			left: 50%;
			margin-left: -475px;
			bottom: 300px;
		}
		.content > ul {

		}
		.content > ul::after {
			display: block;
			content: "";
			clear: both;
		}
		.content > ul >li {
			width: 200px;
			height: 180px;
			margin-right: 50px;
			float: left;
			overflow:hidden; 
		}

		.content > ul >li:last-child {
			margin-right: 0;
		}
		.content > ul >li > div {
			width: 1600px;
			height: 180px;
			font-size: 0;

			animation-name: dong;
			animation-duration: 1s;
			/*animation-delay: 1s;*/
			animation-iteration-count: infinite;
			/*animation-direction: reverse;*/
			animation-timing-function: steps(8);
		}
		.content > ul >li > div > img {
			width: 100%;
		}
		/*1. Defining animation*/
		@keyframes dong {
			from {
				margin-left: 0
			}
			to {
				margin-left: -1600px;
			}
		}
		html,body,.main {
			height: 100%;
		}
		.main {
			position: relative;
			width: 100%;
			overflow: hidden;
		}
		.main > .bg {
			position: relative;
			width: 3920px;
			height: 100%;
			background-image: url('./images/bg.jpg');
			background-repeat: repeat-x;

			animation-name: bg;
			animation-duration: 30s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}
		@keyframes bg {
			from {
				left:-1920px;
			}
			to {
				left: 0;
			}
		}
	</style>
</head>
<body>
	<div class="main">
		<!-- background -->
		<div class="bg"></div>
		<!-- 4 masters and apprenticeship -->
		<div class="content">
			<ul>
				<li>
					<div><img src="./images/wk.png" alt=""></div>
				</li>
				<li>
					<div><img src="./images/bj.png" alt=""></div>
				</li>
				<li>
					<div><img src="./images/ts.png" alt=""></div>
				</li>
				<li>
					<div><img src="./images/ss.png" alt=""></div>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

Design sketch:

Keywords: css3 github

Added by Skippy93 on Mon, 07 Oct 2019 11:12:42 +0300