css动画+帧动画
程序员文章站
2022-03-27 17:10:50
...
动画：animation
设置关键帧
<style type="text/css">
#d1{
width: 200px;
height: 200px;
background: pink;
animation: donghua1 3s;
}
@keyframes donghua1{
/* from{} 等同于0%{}，最开始*/
0%{
transform: translate(0,0);
}
/* 一共三秒，第一秒*/
33.3%{
transform: translate(500px,0);
}
/* to{}等同于100%{}，最后 */
100%{
transform: translate(500px,400px);
}
}
</style>从左上，到右上，到右下的动画
上面是系统性动画属性，下面拆分：
animation:综合性的动画设置属性
animation-name:动画名称
animation-duration:动画的时间周期
animation-timing-function:动画变化的速度，默认ease，linear,ease-in,ease-out,也可是设置贝塞尔曲线
animation-delay:延迟时间
animation-iteration-count:动画循环次数,infinite无限循环
animation-direction:运动的方向,normal默认值，alternate奇数次正常运动，偶数次反方向运动，reverse,都是反方向运动，终点是起始点，alternate-reverse奇数次反方向偶数次正方向运动
animation-fill-mode: forwards;使得动画保留最后一帧的效果
制作一个loading动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.loading{
margin: 0 auto;
width: 300px;
height: 300px;
position: relative;
}
.loading .circle{
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
animation-timing-function: linear !important;
}
.small{
width: 30px;
height: 30px;
background: deepskyblue;
margin: 10px auto;
border-radius: 15px;
}
@keyframes loading{
from{
opacity: 1;
}
to{
opacity: 0.1;
}
}
.loading .circle:nth-child(1){
transform: rotate(45deg);
animation: loading 0.9s infinite;
}
.loading .circle:nth-child(2){
transform: rotate(90deg);
animation: loading 0.9s infinite 0.1s;
}
.loading .circle:nth-child(3){
transform: rotate(135deg);
animation: loading 0.9s infinite 0.2s;
}
.loading .circle:nth-child(4){
transform: rotate(180deg);
animation: loading 0.9s infinite 0.3s;
}
.loading .circle:nth-child(5){
transform: rotate(225deg);
animation: loading 0.9s infinite .4s;
}
.loading .circle:nth-child(6){
transform: rotate(270deg);
animation: loading 0.9s infinite .5s;
}
.loading .circle:nth-child(7){
transform: rotate(315deg);
animation: loading 0.9s infinite .6s;
}
.loading .circle:nth-child(8){
transform: rotate(360deg);
animation: loading 0.9s infinite .7s;
}
</style>
</head>
<body>
<!-- .loading>(div.circle>.small)*8 -->
<div class="loading">
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
<div class="circle">
<div class="small"></div>
</div>
</div>
</body>
</html>
帧动画：step（帧数）
animation: lxw 2s steps(16) infinite;
上一篇： css动画的steps