.box{ width: 200px; height: 200px; background-color: #f00; animation:example 5s infinite; /*设置动画名和总时间并使动画无限循环*/ animation-delay: 2s;/*设置动画延迟2秒开始*/ } @keyframes example{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(180deg); } 100%{ transform:rotate(360deg); } }
在上述代码中,大家使用了animation-delay属性来设置动画的开始时间。通过设置2s的延迟时间,动画效果将从动画的第2秒开始,使得动画效果更加精准。
在CSS3动画设计中,使用开始帧数能够让动画从更精准的时间开始运行,增强动画效果。在具体使用中,大家可以根据需要设定动画开始的帧数,以达到更好的动画效果。