当前位置：首页 > 源码资料 > 正文内容

css3动画两个div从两边出来，CSS3动画，双Div从两侧优雅浮现

wzgly2个月前 (07-07)源码资料1

CSS3动画实现两个div从屏幕两边缓缓滑入的视觉效果，为两个div设置相同的动画属性，包括动画名称、持续时间、运行次数和填充模式，使用@keyframes定义动画关键帧，通过改变div的transform属性（如translateX）来控制其位置变化，通过CSS选择器分别触发两个div的动画，实现从两侧同时出现的动态效果。

嗨，大家好！我最近在学习CSS3动画，想实现一个效果，就是让两个div元素从屏幕的两边慢慢滑出来，形成一个动态的视觉效果，但是我对CSS3动画的理解还不够深入，不知道该如何下手，有没有高手能指导一下,这个效果该如何实现呢？

CSS3动画实现两个div从两边出来的效果

了解CSS3动画基础

动画属性：我们需要了解一些基本的CSS3动画属性，如transition、animation、@keyframes等。
transition属性：transition属性用于指定CSS样式的变化过渡效果,可以应用于任何具有可变属性的元素。
animation属性：animation属性用于定义动画的名称、持续时间、延迟、迭代次数等。
@keyframes规则：@keyframes规则定义了动画的关键帧,即动画在不同时间点的样式。

实现两个div从两边出来的动画

HTML结构：我们需要两个div元素,分别代表从左边和右边滑出的效果。
```
<div id="leftDiv"></div>
<div id="rightDiv"></div>
```

CSS样式：我们为这两个div设置基本的样式,并定义动画效果。

#leftDiv {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: -100px; /* 初始位置在左边屏幕外 */
    top: 50%;
    transform: translateY(-50%);
}
#rightDiv {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    right: -100px; /* 初始位置在右边屏幕外 */
    top: 50%;
    transform: translateY(-50%);
}
@keyframes slideIn {
    0% {
        left: -100px;
    }
    100% {
        left: 0;
    }
}
@keyframes slideInRight {
    0% {
        right: -100px;
    }
    100% {
        right: 0;
    }
}
#leftDiv {
    animation: slideIn 2s forwards;
}
#rightDiv {
    animation: slideInRight 2s forwards;
}

动画效果解析：
- #leftDiv和#rightDiv分别设置了初始位置在屏幕外。
- 使用@keyframes定义了slideIn和slideInRight动画,分别实现从左边和右边滑入的效果。
- animation属性设置了动画的名称、持续时间（2秒）和动画填充模式（forwards，使动画完成后停留在最后一帧）。

优化与扩展

添加过渡效果：为了使动画更加平滑，可以添加transition属性。
```
#leftDiv, #rightDiv {
    transition: transform 0.5s ease;
}
```

响应式设计：为了适应不同屏幕尺寸,可以使用媒体查询来调整动画的参数。

@media (max-width: 600px) {
    #leftDiv, #rightDiv {
        width: 50px;
        height: 50px;
    }
}

添加动画触发事件：可以通过JavaScript来控制动画的触发时机,例如在页面加载完成后开始动画。

window.onload = function() {
    document.getElementById('leftDiv').style.animationPlayState = 'running';
    document.getElementById('rightDiv').style.animationPlayState = 'running';
};

通过以上步骤，我们可以实现两个div从两边出来的CSS3动画效果，希望这篇文章能帮助你更好地理解CSS3动画,并在实际项目中应用。

其他相关扩展阅读资料参考文献：

基础动画实现

定义动画属性
使用@keyframes创建自定义动画，通过animation-name指定动画名称，animation-duration控制动画时长（如2s），animation-timing-function设置动画速度曲线（如ease-in）。动画属性需与div元素的定位结合使用，才能实现从两侧出场的效果。
关键帧设置
在关键帧中定义初始状态和最终状态。from { transform: translateX(-100%); opacity: 0; }表示div从左侧完全移出，to { transform: translateX(0); opacity: 1; }表示回到原位并显示。通过transform属性实现平滑移动，opacity控制透明度变化。
动画方向与触发
使用animation-direction设置动画方向（如alternate实现反向运动），animation-fill-mode定义动画结束后的状态（如forwards保持最终效果）。通过animation-play-state可动态控制动画暂停或继续。

进阶技巧

延迟与同步控制
为两个div分别设置animation-delay（如0s和5s），使它们以不同时间间隔出场。延迟值需根据动画时长合理分配，避免出现卡顿或重叠。
循环与播放次数
通过animation-iteration-count设置循环次数（如infinite持续播放），或使用animation-direction: alternate实现往返动画。注意：页面加载时默认只播放一次，需手动触发多次。
动画触发方式
结合hover、click或scroll事件激活动画。animation-play-state: running在鼠标悬停时启动，animation-play-state: paused在点击后暂停。动态触发可增强用户交互体验。

兼容性处理

浏览器前缀适配
为确保兼容性，需在CSS中添加-webkit-、-moz-、-ms-等厂商前缀。
```
@-webkit-keyframes slideIn { /* 代码 */ }
@-moz-keyframes slideIn { /* 代码 */ }
@-ms-keyframes slideIn { /* 代码 */ }
```
现代浏览器已广泛支持CSS3动画，但旧版本仍需前缀兼容处理。
动画属性兼容性
transform和opacity在主流浏览器中兼容性较好，但需注意animation属性在IE10以下版本不支持。建议使用@keyframes实现核心动画，避免依赖浏览器内置效果。
渐变效果优化
若需添加背景渐变，使用background-image: linear-gradient()实现。渐变动画需与平移动画同步，避免视觉冲突。

实际应用场景

导航菜单展开
将两个div分别作为菜单项，通过动画从左右两侧滑入，提升页面交互的流畅感。左侧div可设置translateX(-100%)，右侧div设置translateX(100%)。
页面加载引导
在页面加载时，通过动画让两个div从两侧逐渐出现，引导用户注意力。动画时长建议控制在1-3秒，避免用户感到不适。
元素切换动画
在用户点击按钮时，通过动画切换两个div的显示状态，实现动态过渡。结合opacity和transform可增强切换的视觉层次。

性能优化

硬件加速应用
为动画元素添加transform: translate3d()或will-change: transform，利用GPU加速提升流畅度。避免频繁修改布局属性（如width、height），减少重排重绘。
动画简化策略
减少关键帧数量，仅保留必要的状态（如from到to两个关键点）。复杂动画可能影响性能，需根据需求取舍。
资源管理技巧
避免在页面中过度使用动画，尤其是移动端。可通过@media查询限制动画在特定设备上的播放。

实现两个div从两侧出场的CSS3动画，核心在于关键帧定义、动画属性组合和性能优化，通过合理设置translateX、opacity、animation-delay等属性，可灵活控制动画效果。实际应用中需兼顾兼容性与用户体验，避免过度设计，掌握这些技巧后，开发者可以轻松将动态效果融入网页布局，提升视觉吸引力与交互流畅度。