[分享]css3按照文字不同时间出现

CSS3的一个非常有用的特性是可以按照文字不同的时间出现，这对于制作动画效果非常有帮助。那么如何实现呢？下面介绍一些方法。 首先，我们可以使用keyframes关键字来定义不同的动画时间点，比如： k...

CSS3的一个非常有用的特性是可以按照文字不同的时间出现，这对于制作动画效果非常有帮助。那么如何实现呢？下面介绍一些方法。
首先，我们可以使用keyframes关键字来定义不同的动画时间点，比如：

@keyframes anim {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
} 

这样就定义了从0%到100%的一个动画过程，我们可以将它应用到某个元素上，比如：

p {
  animation: anim 2s infinite linear;
} 

这里我们将动画应用到了p标签上，让它在2秒钟内不断播放。linear表示动画播放是匀速的，如果想要一些特殊的效果，还有其他的选项可以选择。
如果想要更加复杂的动画效果，我们可以利用延时和时长来实现。比如：

p:nth-child(1) {
  animation: 1s ease-out 0s infinite alternate both slidein;
}
<br>
p:nth-child(2) {
  animation: 2s ease-in-out 1s infinite alternate both slidein;
}
<br>
p:nth-child(3) {
  animation: 1s cubic-bezier(0.42, 0, 0.58, 1) 3s infinite alternate both slidein;
} 

这里我们利用了:nth-child选择器来分别选中了三个p标签，然后分别应用了不同的动画效果，第一个从0秒开始，第二个从1秒开始，第三个从3秒开始，它们都是无限循环的。
最后，我们还可以通过JavaScript来控制动画效果，利用CSS3提供的transition属性来实现平滑的动画效果。比如：

p {
  transition: transform 0.5s ease-out;
}
<br>
p:hover {
  transform: scale(1.2);
} 

这里我们定义了一个缩放的动画效果，当鼠标移动到p标签上时，它就会放大1.2倍。transition属性告诉浏览器如何实现这个动画效果，它会自动计算从当前状态到目标状态所需的时间和速度，让动画效果更加平滑。
总之，CSS3提供了丰富的动画效果，只需要花费一些时间学习，就可以制作出非常酷炫的效果。