HTML-动画实现Animation
前言
在没有接触js之前，大家使用HTML和CSS做出来的页面都是静态页面，久而久之，静态页面显得非常的无趣，已经无法满足大家的需求了，就会开始有很多新鲜的idea，比如我想让hover鼠标悬停事件变得更有趣，我想让图片动起来，我想做一个会动的页面，那么不使用js可不可以做呢？答案是必须的~
那么今天为大家带来的是动画animationn，可以满足大家一些简单的动态要求。
简单介绍
Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作。
下面先介绍玩animation的属性之后，再给大家带来一个案例 ，更清晰的了解animation的用法。
属性：
- @keyframes
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- anmiation-fill-mode
- animation-play-state
- animation连写
@keyframes
首先我们需要先设置动画序列**@keyframes**，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。
/* 第一种方式：0% -> 100% */
@keyframes animiationName {
0% {
css-style
}
50% {
css-style
}
100% {
css-style
}
}
这里不一定只能是我写的0% 50% 100%而已，亦可以10% 25% 75%等
/* 第二种方式：from -> to */
@keyframes animiationName {
from {
css-style;
}
to {
css-style;
}
}
而是用from to方式，就是固定from to两个变化了，相当于从0到100的变化。如果需要细微变化的话使用第一种方式，不然的话第二种也够用了。
animation-name
指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画。告诉系统我们需要自己创建一个名称叫做animiationName的动画，也即是我们刚才@keyframes创建的animationName。
/* 第二步：animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画 */
animation-name: animationName;
animation-duration
动画指定需要多少秒或毫秒完成，告诉系统动画持续的时间
time指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。
/* -animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长 */
/* 持续动画时间 */
animation-duration: 1s;
animation-duration: 5s;
animation-timing-function
设置动画将如何完成一个周期，告诉系统动画执行的速度
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
/* -animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度 */
animation-timing-function: linear;
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-in-out;
animation-timing-function: ease-out;
animation-delay
设置动画在启动前的延迟间隔。
time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0
/* -animation-delay 设置动画在启动前的延迟间隔。 */
animation-delay: 0.5s;
animation-iteration-count
定义动画的播放次数。告诉系统动画需要执行几次
n 一个数字，定义应该播放多少次动画
infinite 无限次往返执行
/* 定义动画的播放次数。告诉系统动画需要执行几次 */
/* 无限次 infinite*/
animation-iteration-count: infinite;
/* 循环五次 */
animation-iteration-count: 5;
animation-direction
指定是否应该轮流反向播放动画。
normal 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate 往返动画, 执行完一次之后往回执行下一次
reverse 反向执行
/*指定是否应该轮流反向播放动画。 */
/* 默认的取值, 执行完一次之后回到起点继续执行下一次 */
animation-direction: normal;
/* 往返动画, 执行完一次之后往回执行下一次 */
animation-direction: alternate;
/* 反向执行 */
animation-direction: reverse;
animation-fill-mode
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式
backwards: 让元素等待状态的时候显示动画第一帧的样式
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
/* 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 */
/* 让元素结束状态保持动画最后一帧的样式 */
animation-fill-mode: forwards;
animation-play-state
告诉系统当前动画是否需要暂停，这个通常要需要与其他事件一起使用，比如鼠标悬停时选择暂停或播放。
running: 执行动画
paused: 暂停动画
animation-play-state: paused;
animation-play-state: running;
animation连写
animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);
/* 举例子 */
animation-name: leftTopRight;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0.5s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;
将上面的属性连写 即是：
animation:leftTopRight 1s linear 0.5s 3 alterate forwards
接下来给大家带来一个案例：方块向左来回循环移动。
（由于无法放视频和动图，所以效果大家自行运行起来看一下辣~）
代码奉上：
<!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>animation</title>
<style>
div {
width: 100px;
height: 100px;
background-color: cyan;
/* 第二步：animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画 */
animation-name: leftTopRight;
/* -animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长 */
/* 持续动画时间 */
animation-duration: 2s;
/* -animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度 */
animation-timing-function: linear;
/* -animation-delay 设置动画在启动前的延迟间隔。 */
animation-delay: 0.5s;
/* -animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次 */
/* 无限次 infinite*/
animation-iteration-count: infinite;
/* -animation-direction 指定是否应该轮流反向播放动画。 */
/* 默认的取值, 执行完一次之后回到起点继续执行下一次 */
/* 往返动画, 执行完一次之后往回执行下一次 */
animation-direction: alternate;
/* -animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 */
/* 让元素结束状态保持动画最后一帧的样式 */
animation-fill-mode: forwards;
}
div:hover {
/* -animation-play-state 告诉系统当前动画是否需要暂停 */
/* 鼠标悬停，暂停 */
animation-play-state: paused;
}
/* 第一步：新建动画的关键帧 */
@keyframes leftTopRight {
/* 0%{}
50%{}
100%{} */
/* 0% -> 100% */
from {
margin-left: 0;
width: 100px;
background-color: cyan;
}
to {
margin-left: 500px;
width: 200px;
background-color: darkblue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhheigig
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22
