1.动画的初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 200px auto;
animation: dong 1s 10000;
}
p {
animation: dong 2s 100;
width: 200px;
margin: 100px auto;
background-color: pink;
}
/*
1. 需要定义一个动画 @keyframes 动画的名字 {}
2. 给某个元素使用动画 animation: 动画的名字 时间;
*/
@keyframes dong {
/* 开始的效果 */
from {
transform: scale(1);
}
/* 结束的效果 */
to {
transform: scale(1.5);
}
}
</style>
</head>
<body>
<div></div>
<p>123</p>
</body>
</html>
2.定义动画的详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
from to : 动画只会有两个状态
0%{} 30%{} 60%{} 100%{}
*/
@keyframes dong {
0% {
transform: scale(1) translateX(0px);
}
50% {
transform: scale(1.5) translateX(0px);
}
100% {
transform: scale(1.5) translateX(800px);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation: dong 1s 2;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.动画的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
通过animation就使用动画
animation是一个复合属性，由8个子属性构成的
*/
@keyframes play {
from {
transform: scale(1);
}
to {
transform: scale(2);
}
}
div {
width: 100px;
height: 100px;
margin: 200px auto;
background-color: pink;
/* animation-name: 指定动画的名字 */
animation-name: play;
/* animation-duration: 指定一次动画的持续时间 */
animation-duration: 1s;
/* animation-delay: 动画的延迟时间; */
/* animation-delay: 2s; */
/* animation-timing-function: ease linear steps */
/* animation-timing-function: steps(5); */
/* 动画可以指定次数 数字 infinite(无穷) */
animation-iteration-count: infinite;
/* 了解 */
/* 指定动画的方向: normal reverse(反转) alternate(交替) alternate-reverse() */
/* animation-direction: alternate; */
/* 指定动画结束的状态 forwards(停留在结束的时状态) backwards */
/* animation-fill-mode: forwards; */
}
div:hover {
/* 指定动画的状态: paused */
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.动画的八个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
转场动画：
animation-name: 动画的名字 @keyframes
animation-duration: 动画的时间 1s 2s
animation-delay: 动画的延迟时间
animation-timing-function: 动画的效果
animation-iteration-count: 动画的次数 infinite
animation-direction: 动画的方向 alternate reverse
animation-fill-mode: 指定动画结束的状态 forwards
animation-play-state: 暂停动画 paused
动画的合写: 第一个时间是持续时间
animation: dong 1s infinite alternate linear;
*/
</style>
</head>
<body>
</body>
</html>
5.风车动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 240px;
height: 240px;
margin: 200px auto;
/* background-color: pink; */
position: relative;
animation: zhuan .8s infinite linear;
z-index: 2;
}
li {
position: absolute;
width: 60px;
height: 120px;
background-color: green;
left: 60px;
border-radius: 60px 0 0 60px;
transform-origin: bottom right;
}
li:nth-child(2) {
transform: rotate(90deg);
background-color: orange;
}
li:nth-child(3) {
transform: rotate(180deg);
background-color: purple;
}
li:nth-child(4) {
transform: rotate(270deg);
background-color: blue;
}
/* 定义一个动画 */
@keyframes zhuan {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.windmill {
position: relative;
width: 240px;
height: 240px;
margin: 200px auto;
}
.gun {
width: 10px;
height: 200px;
background-color: #000;
position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="windmill">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="gun"></div>
</div>
</body>
</html>
6.小鱼动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: skyblue;
}
.fish {
width: 174px;
height: 126px;
background-image: url('imgs/fish-12-126.png');
background-position: 0 0;
animation: dou .8s infinite steps(12), you 5s infinite linear;
}
@keyframes dou {
from {
background-position: 0 0;
}
to {
background-position: 0 -1512px;
}
}
@keyframes you {
0% {
transform: translateX(0px) rotate(0deg);
}
25% {
transform: translateX(1400px) rotate(0deg);
}
50% {
transform: translateX(1400px) rotate(180deg);
}
75% {
transform: translateX(0px) rotate(180deg);
}
100% {
transform: translateX(0px) rotate(360deg);
}
}
.fish:nth-child(1) {
animation-duration: 2s, 10s;
}
</style>
</head>
<body>
<div class="fish"></div>
<div class="fish"></div>
<div class="fish"></div>
<div class="fish"></div>
<div class="fish"></div>
</body>
</html>