<div id="ovalDiv" class="ovalDiv"></div>
.ovalDiv {
width: 990px;
height: 990px;
background-image: url("~@/assets/img/bigScreen/oval.png");
background-size: 990px 990px;
position: absolute;
top: 0;
left: 1110px;
animation-name: ovalDiv; /*应用动画 值为div绑定的id*/
animation-duration: 3s; /*设置动画持续时间*/
animation-iteration-count: infinite; /*使动画循环*/
animation-timing-function: linear; /*使动画的速度曲线为线性增长*/
}
@keyframes ovalDiv { /* 值为div绑定的id */
0%{
//transform: scale(0.9); // 呼吸
opacity: 1; // 闪烁
}
50%{
//transform: scale(1.1);
opacity: 0;
}
100%{
//transform: scale(0.9);
opacity: 1;
}
}
animation可简写
animation: name duration timing-function delay iteration-count direction;