文章目录
html5的动画(animation)
animation(动画)和transition(过渡)其实差不多,就是一个自己会动(动画),一个需要触发才可以动。
然后动画是需要定义的,像函数一样,过渡则不用,过渡是直接写在某标签或者类名等的样式中即可。那么动画要怎么定义呢?
动画的定义(@keyframes(关键帧))
设置动画效果,必须要先设置一个关键帧,关键帧设置了动画的每一个步骤,最简单的关键帧的定义如下:(定义在css文件或者在style标签中,moveToRight是自己取的名字,类似于我们的函数名,需要被调用)
@keyframes moveToRight {
from{
margin-left: 0%;
}
to{
margin-left: 100%;
}
}
动画的调用(使用)
只需要使用animation-name:关键帧名;来使用即可。
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;