1、基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本使用</title>
<style>
.outer{
width: 1000px;
height: 100px;
border: 1px solid black;
}
/* 定义一个动画（定义一组关键帧）--第一种方式 */
@keyframes wangyoudong {
/* 第一帧 */
from{
}
/* 最后一针 */
to{
transform: translate(900px);
background-color: red;
}
}
/* 定义一个动画（定义一组关键帧）--第二种方式 */
@keyframes wangyoudong2{
/* 第一帧 */
0%{
}
/* 29%{
background-color: red;
}
48%{
background-color: orange;
}
88%{
background-color: yellow;
} */
/* 最后一帧 */
100%{
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
.inner{
width: 100px;
height: 100px;
background-color: deepskyblue;
/* 应用动画到元素 */
animation-name: wangyoudong2;
/* 动画持续的时间 */
animation-duration: 3s;
/* 动画的延迟时间 */
animation-delay: 0.2s;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>2、其他属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>其他属性</title>
<style>
.outer{
width: 200px;
height: 1000px;
}
/* 定义一个动画（定义一组关键帧）--第一种方式 */
@keyframes wangyoudong2 {
/* 第一帧 */
from{
}
/* 最后一针 */
to{
transform: translateY(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
.inner{
width: 200px;
height: 200px;
/* 应用动画到元素 */
animation-name: wangyoudong2;
/* 动画持续的时间 */
animation-duration: 4s;
/* 动画的延迟时间 */
animation-delay: 0.2s;
/* ****其他属性--start***** */
/* 设置动画的方式 */
animation-timing-function: linear;
/* 动画播放的次数 */
animation-iteration-count: infinite;
/* 动画的方向 */
animation-direction: alternate;
/* 动画以外的状态（不发生动画的时候在哪里） */
/* animation-fill-mode: forwards; */
/* 动画的播放状态 */
}
.outer:hover .inner{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="outer">
<img src="/周渝皓的个人网站/tp/love.png" class="inner">
</div>
</body>
</html>3、动画的复合属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画复合属性</title>
<style>
.outer{
width: 1000px;
height: 100px;
border: 1px solid black;
}
/* 定义一个动画（定义一组关键帧）--第一种方式 */
@keyframes wangyoudong2 {
/* 第一帧 */
from{
}
/* 最后一针 */
to{
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
.inner{
width: 100px;
height: 100px;
background-color: deepskyblue;
animation: wangyoudong2 3s 0.5s linear 2 alternate-reverse forwards;
}
.outer:hover .inner{
/* 暂停单独用 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>动画与过渡的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画与过渡的区别</title>
<style>
.outer{
width: 1000px;
height: 200px;
border: 1px solid black;
}
.inner{
width: 100px;
height: 100px;
}
/* 用过度实现inner1跑到右边去 */
.inner1{
background-color: orange;
transition: 3s linear;
}
.outer:hover .inner1{
transform: translate(900px);
}
/* 用动画实现inner2跑到右边去 */
@keyframes atzhou{
0%{
}
100%{
transform: translate(900px);
}
}
.inner2{
background-color: green;
animation:atzhou 3s linear forwards;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">过渡</div>
<div class="inner inner2">动画</div>
</div>
</body>
</html>
评论 (0)