1. 基本使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<style>
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
.inner {
width: 100px;
height: 100px;
background-color: deepskyblue;
/* 应用动画到元素 */
animation-name: wangyoudong2;
/* 动画持续时间 */
animation-duration: 3s;
/* 延迟时间 */
animation-delay: 0.3s;
}
/* 定义一组关键帧 第一种方式 */
@keyframes wangyoudong {
/* 第一帧 */
from {
}
/* 最后一帧 */
to {
transform: translate(900px);
background-color: red;
}
}
/* 定义一组关键帧 第二种方式（完整写法） */
@keyframes wangyoudong2 {
/* 第一帧 */
0% {
}
50% {
background-color: palevioletred;
}
/* 最后一帧 */
100% {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>2. 其他属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>其他属性</title>
<style>
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
.inner {
width: 100px;
height: 100px;
background-color: deepskyblue;
/* 应用动画到元素 */
animation-name: wangyoudong;
/* 动画持续时间 */
animation-duration: 2.5s;
/* 延迟时间 */
animation-delay: 0.2s;
/* 其他属性 start */
/* 设置动画的方式 */
animation-timing-function: linear;
/* 播放次数 */
animation-iteration-count: infinite;
/* 方向 */
animation-direction: alternate;
/* 动画以外的状态（不发生动画的时候在哪里） */
/* animation-fill-mode: backwards; */
/* 动画的播放状态 */
/* animation-play-state: paused; */
}
.outer:hover .inner{
animation-play-state: paused;
}
/* 定义一组关键帧 第一种方式 */
@keyframes wangyoudong {
/* 第一帧 */
from {
}
/* 最后一帧 */
to {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>3. 复合属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>复合属性</title>
<style>
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
.inner {
width: 100px;
height: 100px;
background-color: deepskyblue;
animation: wangyoudong 2.6s 0.5s linear 2 alternate-reverse forwards;
}
/* animation-play-state 一般单独使用 */
.outer:hover .inner{
animation-play-state: paused;
}
/* 定义一组关键帧 第一种方式 */
@keyframes wangyoudong {
/* 第一帧 */
from {
}
/* 最后一帧 */
to {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>4. 动画与过渡的区别
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动画与过渡的区别</title>
<style>
.outer {
width: 1000px;
height: 200px;
border: 1px solid black;
}
.inner {
width: 100px;
height: 100px;
}
.inner1 {
background-color: orange;
transition: 3s linear;
}
.outer:hover .inner1 {
transform: translate(900px);
}
.inner2 {
background-color: deepskyblue;
animation: wangyoudong 3s linear forwards;
}
@keyframes wangyoudong {
0% {
}
50% {
background-color: red;
border-radius: 50%;
box-shadow: 0px 0px 20px ;
}
100% {
transform: translate(900px);
}
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">过渡</div>
<div class="inner inner2">动画</div>
</div>
</body>
</html>
评论 (0)