[分享]css3动画设置div

CSS3动画是一种添加动态效果的方法，可以为网站的交互和视觉效果增添新的可能性。下面我们来看看如何使用CSS3动画为div设置动态效果。/ 设置动画 / keyframes move { / 关键帧的...

CSS3动画是一种添加动态效果的方法，可以为网站的交互和视觉效果增添新的可能性。下面我们来看看如何使用CSS3动画为div设置动态效果。

/* 设置动画 */
@keyframes move {
    /* 关键帧的具体设置 */
    0% { left: 0; }
    50% { left: 50%; }
    100% { left: 100%; }
}

/* 在div上应用动画 */
div {
    /* 设置动画以及动画时间 */
    animation: move 2s;
    /* 设置动画重复次数 */
    animation-iteration-count: 2;
    /* 设置动画结束后保持最终状态 */
    animation-fill-mode: forwards;
    /* 设置动画速度曲线 */
    animation-timing-function: ease-in-out;
} 

以上代码中，我们首先使用@keyframes关键字定义了一个名为“move”的动画，它包含了过程中物体左侧距离左侧的百分比的不同取值。然后我们在div上设置了这个动画，动画时间为2秒，重复次数为2次，结束后保持最终状态，速度曲线为缓进缓出。

通过这些设置，我们就能够让div在网页中产生跨越页面显示的动态效果了。