css3 动画 源代码

CSS3 动画是一种让Web页面更生动、有趣的技术。借助CSS3 动画，我们可以让页面中的元素在不同的状态间流畅地过渡，从而给用户带来更加良好的交互体验。 下面是一个使用CSS3 动画实现的小例子：

HTML 代码：

<div class="animated">
     <p>这是一段文本</p>
</div>

CSS 代码：

.animated {
     animation-duration: 2s; /* 动画持续时间 */
     animation-name: bounce; /* 动画名称 */
     animation-iteration-count: infinite; /* 动画次数 */
}

/* 定义动画 */
@keyframes bounce {
     0% {
          transform: translateY(0); /* 初始状态 */
     }
     50% {
          transform: translateY(-50px); /* 中间状态 */
     }
     100% {
          transform: translateY(0); /* 结束状态 */
     }
}

上述代码实现了一个“反弹效果”的动画，让页面中的一个元素在呈现时不断地上下反弹。其中，animation-duration 属性定义了动画执行的时间，animation-name 属性指定了动画的名称，而 animation-iteration-count 属性则指定了动画的执行次数。 页面元素的动画效果通过 @keyframes 规则定义。在这里，我们分别定义了动画的三个关键帧——0%、50% 和 100%。通过 transform 属性，在不断变化的状态间实现元素的平移。 总的来说，CSS3 动画是一项非常有用、易于掌握的Web技术。在实际开发中，我们可以根据项目需求灵活运用，为用户带来更加完美的页面体验。