[分享]css3控制时间代码

CSS3可以控制元素在不同的时间点上发生怎样的变化，这是通过使用animation和keyframes属性来实现的。

/*定义动画*/
@keyframes myAnim {
    0% {background-color: red;}
    50% {background-color: blue;}
    100% {background-color: green;}
}

/*应用动画*/
.box {
    animation-name: myAnim;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
} 

代码解释：

首先，我们使用keyframes属性定义了一个名为myAnim的动画。在这个动画里，我们分别定义了0%、50%和100%三个时间点的样式变化，它们会让元素的背景颜色从红色到蓝色再到绿色渐变。

然后，我们把这个动画应用到一个类名为box的元素上，通过animation-name属性指定动画名称。接着，我们通过animation-duration属性指定动画持续2秒，animation-delay属性指定动画延迟1秒开始播放。

同时，我们使用animation-iteration-count属性指定动画循环次数为无限次，animation-direction属性指定动画播放完一次后反向播放。

通过CSS3控制时间代码，我们可以创造出更加生动、有趣的页面效果。