css常见动画
warning:
这篇文章距离上次修改已过439天，其中的内容可能已经有所变动。
CSS常见的动画主要通过@keyframes规则和animation属性组合使用来实现。
以下是一个简单的例子，展示了如何使用CSS动画来创建一个简单的淡入效果：
/* 定义关键帧 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 应用动画到元素 */
.element {
animation: fadeIn 1s ease-in-out forwards;
}HTML部分：
<div class="element">我是一个淡入动画的例子</div>在这个例子中，.element将在1秒内从完全透明（opacity: 0）渐变至完全不透明（opacity: 1），并且动画在结束后会保持最后的状态 (forwards)。ease-in-out是动画的缓动函数，它会使动画在开始和结束时慢，中间时快，给用户更流畅的体验。
评论已关闭