动画
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数，通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
- 动画的基本格式
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
animation:（动画的属性）动画的值
}
@keyframes run{
from{}
to{}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
- 动画的执行方式
@keyframes run{
from{}
to{}
}
或者
@keyframes run{
0%{}
100%{}
}
-
动画的各种参数
1. 设置动画的序列名称
animation-name
2.设置动画执行一次所需要的时间
animation-duration
3.设置动画延迟执行的时间
animation-delay
4.设置动画执行的次数
animation-iteration-count
5.设置动画执行方向
animation-direction相反方向 alternate 常顺序 normal 6.设置动画执行完毕时保持的状态
animation-fill-mode
7.设置动画执行的速度
animation-timing-function
8.设置动画是否执行
animation-play-state
| 开始动画 | running |
|---|---|
| 停止动画 | paused |
帧动画
帧动画是将animation中设置steps的值所生成的动画
下面是帧动画的程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width:400px ;
height: 400px;
border: 3px solid black;
border-radius:50% ;
margin: 100px auto;
position: relative;
}
.div2{
width: 5px;
height: 200px;
border: 1px solid black;
background-color:black ;
border-radius: 50% 50% 0 0/ 50% 50% 0 0;
position: absolute;
left: 200px;
top: 0px;
animation: name 60s steps(60) infinite;
transform-origin: center bottom;
}
@keyframes name{
from{}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>