HTML5 CSS动画 animation使用

我脾气呢

2024-07-01 帮助1人

首先看一下页面的布局

<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>

animation（动画）和transition（过渡）其实差不多，就是一个自己会动（动画），一个需要触发才可以动。

动画的定义（@keyframes（关键帧））
设置动画效果，必须要先设置一个关键帧，关键帧设置了动画的每一个步骤，最简单的关键帧的定义如下：(定义在css文件或者在style标签中，moveToRight是自己取的名字，类似于我们的函数名，需要被调用）

@keyframes moveToRight {
from{
margin-left: 0%;
}
to{
margin-left: 100%;
}
}

也可以写成：

0% 100%都是可以调整的也可以25% 50% 75%都是可以的

数值自己定根据自己想要的效果进行设置（类似）

@keyframes moveToRight {
0%{
margin-left: 0%;
}
100%{
margin-left: 100%;
}
}

@keyframes moveToRight {
0%{
margin-left: 0%;
}
25%{
margin-left: 33%;
}
50%{
margin-left: 50%;
}
75%{
margin-left: 77%;
}
100%{
margin-left: 100%;
}
}

动画的调用（使用）

只需要使用animation-name:关键帧名；来使用即可

.box2{
width: 100px;
height: 100px;
background-color: orange;
animation-name: moveToRight;
animation-duration: 2s;
}

animation也可以使用

animation-duration定义动画时间，
animation-delay设置延迟时间，
animation-timing-function设置动画的时序函数

注意：动画不需要指定动画的属性，可以直接让他过渡。
演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.box1{
width: 600px;
height: 600px;
background-color: grey;
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
animation-name: moveToRight;
animation-duration: 2s;
}
@keyframes moveToRight {
from{
margin-left: 0%;
}
to{
margin-left: 100%;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>

显示：（自动滑动，因为设置了100%，所以会直接滑动到外边，然后被overflow:hidden所隐藏）

animation-iteration-count（动画执行的次数）
可选值：

N（常数，执行N次）
inifinite（无数次）

animation-direction(动画执行的方向）
可选值：

normal：每次从from到to（默认）
reverse：每次都从to到from
alternate：先from到to，然后再从to到from 反复
alternate-reverse：从to到from，然后再从from到to 反复

animation-play-state（动画的执行状态）
可选值：

running：动画执行（默认）
paused：动画暂停

animation-fill-mode（动画的填充模式）
可选值：

none：动画执行完毕回到原来位置（默认）
forward：动画执行完毕，停止在动画结束的位置
backwards：动画延时等待时，元素会处于开始位置
both：结合了forward和backwards。

animation的简写

/*关键帧名为moveToRight*/
animation-name: moveToRight;
/*每次运动时常为2s*/
animation-duration: 2s;
/*移动三次*/
animation-iteration-count: 3;
/*延迟2s*/
animation-delay: 2s;
/*运动方向先from到to，然后再从to到from 反复*/
animation-direction: alternate;
/*动画执行完毕，停止在动画结束的位置*/
animation-fill-mode: forwards;

可以简写为:

            animation: moveToRight 2s infinite 2s alternate forward;

这篇好文章是转载于：学新通技术网

HTML5 CSS动画 animation使用

动画的调用（使用）

animation-iteration-count（动画执行的次数）
可选值：

animation-direction(动画执行的方向）
可选值：

animation-play-state（动画的执行状态）
可选值：

animation-fill-mode（动画的填充模式）
可选值：

animation的简写

photoshop保存的图片太大微信发不了怎么办

photoshop扩展功能面板显示灰色怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

微信运动停用后别人还能看到步数吗

excel打印预览压线压字怎么办

HTML5 CSS动画 animation使用

动画的调用（使用）

animation-iteration-count（动画执行的次数）可选值：

animation-direction(动画执行的方向）可选值：

animation-play-state（动画的执行状态）可选值：

animation-fill-mode（动画的填充模式）可选值：

animation的简写

photoshop保存的图片太大微信发不了怎么办

photoshop扩展功能面板显示灰色怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

微信运动停用后别人还能看到步数吗

excel打印预览压线压字怎么办

animation-iteration-count（动画执行的次数）
可选值：

animation-direction(动画执行的方向）
可选值：

animation-play-state（动画的执行状态）
可选值：

animation-fill-mode（动画的填充模式）
可选值：