[分享]css动画和display哪个先执行

 CSS动画和display哪个先执行？CSS动画和display属性都是Web开发中经常使用的属性，但是它们的执行顺序会影响页面的渲染效果。下面我们就来探讨一下，CSS动画和display属性哪一个...

 CSS动画和display哪个先执行？
CSS动画和display属性都是Web开发中经常使用的属性，但是它们的执行顺序会影响页面的渲染效果。下面我们就来探讨一下，CSS动画和display属性哪一个会先执行。
首先，我们来了解一下这两个属性的作用。CSS动画可以让元素在一段时间内发生变化，可以实现各种效果，比如旋转、放大、缩小等；而display属性可以控制元素的显示方式，包括隐藏、显示、占据空间等。
那么，在页面开始渲染时，这两个属性的执行顺序会是什么样子呢？
实际上，display属性会比CSS动画优先执行。这是因为，在页面开始加载时，浏览器会先根据HTML文档中的标签和属性构建页面结构，然后再根据CSS样式来美化页面的显示效果。而display属性的作用就是控制元素的显示方式，而CSS动画只是一种美化效果，它并不影响页面结构。因此，display属性会先被执行。
下面是一段代码演示了这个过程：

HTML代码：
<div class="box" style="display:none">这是一个div元素</div>

CSS代码：
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 3s infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} 

在这段代码中，我们先设置了一个div元素，并将它的display属性设置为none，也就是隐藏了它。然后，我们又为这个div元素添加了一个CSS动画rotate，来实现旋转效果。由于display属性会先于CSS动画执行，所以这个div元素会一直处于隐藏状态，直到我们通过JavaScript或其他方式将它的display属性改为block或其他值，才能显示这个元素并看到CSS动画的效果。
综上所述，CSS动画和display属性都是常用的Web开发属性，在页面渲染过程中，display属性会比CSS动画先执行，因为它会影响到页面的结构。如果我们要通过CSS动画来实现某些效果，需要注意与display属性的关系，以达到想要的效果。