HTML基础之动画
Posted A小前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML基础之动画相关的知识，希望对你有一定的参考价值。
以下内容总结于网络，只做为个人笔记，不做商业用途，如有侵权，联系必删！
1、动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
2、先定义动画，再使用（调用）动画(哪个盒子要加动画,就调用对应的动画名称)
3、动画序列：0% 是动画的开始，50% ....... 100% 是动画的完成。这样的规则就是动画序列。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。一般我们用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
4、@keyframes 规定动画
.animation (动画的简写) 所有动画属性的简写属性，除了animation-play-state属性
animation-name 设置要使用的动画名animation-name:xxx;
animation-duration 设置动画播放的持续时间默认是0 animation-duration:3s
animation-timing-function 规定动画的速度曲线，默认是“ease”(linear：匀速 ease：慢-快-慢 ease-in：慢-快 ease-out：快-慢 )
animation-delay 规定动画何时开始，默认是0 animation-delay: 0s;
animation-iteration-count 设置动画播放的循环次数 animation-iteration-count: 2 ; infinite 为无限循环 reverse 反向运行alternate 正-反-正
animation-direction 规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是"running",还有"paused"。
animation-fill-mode 设置动画在等待或者结束的时候的状态 (forwards：动画结束后，元素样式停留在 100% 的样式 backwards：在延迟等待的时间内，元素样式停留在 0% 的样式 both：同时设置了 forwards和backwards两个属性值)
5、复合写法
animation: name duration timing-function delay iteration-count direction fill-mode;
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
6、一个盒子加多个动画时用逗号隔开
animation:name duration timing-function delay iteration-count direction fill-mode，
animation: name duration timing-function delay iteration-count direction fill-mode;
7、代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: black;
}
.bx{
width: 200px;
height: 100px;
background-image: url(bear.png);
background-position: 0px 0px;
position: absolute;
animation: dong 0.5s steps(8) 0s infinite , move 4s linear 0s 1 fo rwards,xia 1s steps(1) 4s infinite,
xiaqian 5s steps(800) 4s forwards, zuo 1s steps(1) 9s infinite,zuo qian 5s steps(1200) 9.1s forwards,
shang 1s steps(1) 14.2s infinite,shangqian 5s steps(800) 14.2s f orwards,fuwei 1s steps(1) 19.3s infinite;
}
@keyframes dong{
0%{
background-position: 0px 0px;
}
100%{
background-position: -1600px 0px;
}
}
@keyframes move{
0%{
left: 0px;
}
100% {
left: 1200px;
}
}
@keyframes xia{
0%{
top: 0px;
transform: rotate(90deg);
}
100% {
top: 800px;
}
}
@keyframes xiaqian{
0%{
top: 0px;
}
100% {
top: 800px;
}
}
@keyframes zuo{
0%{
transform: rotateY(180deg);
}
100% {
}
}
@keyframes zuoqian{
0%{
left: 1200px;
}
100% {
left: 10px;
}
}
@keyframes shang{
0%{
transform:rotate(270deg);
}
100% {
}
}
@keyframes shangqian{
0%{
top:800px;
}
100% {
top: 10px;
}
}
@keyframes fuwei{
0%{
transform: rotate(0deg);
}
100% {
}
}
</style>
</head>
<body>
<div class="bx"></div>
</body>
</html>
以上是关于HTML基础之动画的主要内容，如果未能解决你的问题，请参考以下文章