css3 display animate 冲突

CSS3的`display`, `animation` 和其他动画属性在网页设计和前端开发中扮演着重要角色，但在实际应用中可能会遇到冲突情况。

### CSS `display` 属性

`display` 属性用于控制元素如何显示在其容器内。它可以设置为多种值，如 `block`, `inline`, `none` 等，每种值都有不同的展示效果：

- `block`: 元素独占一行，并在新行开始处展现。
- `inline`: 元素沿其父元素的水平方向排列。
- `inline-block`: 类似于 `inline` 的元素，但有宽度和高度可以计算，适用于需要尺寸的元素。
- `flex`: 使得元素参与 Flexbox 布局。
- `grid`: 让元素参与网格布局。
- `none`: 隐藏元素，使其不可见但仍在文档流中占据空间。

### CSS 动画 (`animation`) 属性

`animation` 属性允许您创建复杂的效果，通过一系列关键帧来改变元素的样式。它包括了起始状态、结束状态以及过渡过程的所有细节，例如：

- `keyframes`: 定义动画的关键帧规则。
- `animation-name`: 指定应用的动画名称。
- `animation-duration`: 动画完成所需的时间长度。
- `animation-timing-function`: 控制动画速度曲线。
- `animation-delay`: 动画开始前的延迟时间。
- `animation-iteration-count`: 动画播放次数。

### 相互之间的冲突

当你尝试同时利用 `display` 和 `animation` 来影响元素的外观和可见性时，可能出现一些预料之外的行为：

#### 示例问题

假设你想让某个隐藏(`display: none;`)的元素在页面加载时突然变为可见并进行动画变换。直接将 `display` 设置为 `block` 或者 `inline` 后应用动画通常会失败，因为此时元素已经被从页面流中移除。

解决这种情况的一个常见策略是先使用 `visibility: hidden;` 而不是 `display: none;` 来隐藏元素。这种方法不会立即删除元素，因此后续添加的样式（如 `display: block; animation: ...`）仍然有效。

#### 解决方案示例

#myElement {
  visibility: hidden;
}

/* 页面加载后触发的 CSS */
window.addEventListener('DOMContentLoaded', function() {
  document.getElementById('myElement').style.display = 'block';
  /* 添加动画 */
});

通过这种方式，在页面的 DOMContentLoaded 事件触发后才修改元素的样式，确保动画能够正常工作。

###