//忽大忽小闪烁的动画
@keyframes scaleDraw {
0%{
transform: scale(1);
}
25%{
transform: scale(1.2);
}
50%{
transform: scale(1);
}
75%{
transform: scale(1.2);
}
}
.dot{
9px;
height: 9px;
display: inline-block;
border-radius: 25px;
background-color: #c43535;
-webkit-animation-name: scaleDraw; /*关键帧名称*/
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-webkit-animation-iteration-count: infinite; /*动画播放的次数*/
-webkit-animation-duration: 3s; /*动画所花费的时间*/
}
//旋转动画
.turn{
100px;
height: 100px;
background: aqua;
animation:turn 1s linear infinite;
margin: 100px auto;
}
/*
turn : 定义的动画名称
1s : 动画时间
linear : 动画以何种运行轨迹完成一个周期
infinite :规定动画应该无限次播放
*/
@keyframes turn{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
未完.....