浏览器窗口中心周围的元素动画？答案

【问题标题】：Animation of elements around center of the browser window?浏览器窗口中心周围的元素动画？
【发布时间】：2018-05-13 21:48:06
【问题描述】：

基本上，我有一组元素形式的形状，我希望将它们动画化以从不可见淡入到不透明，同时围绕屏幕中心排列。

我了解到 CSS3 动画/转换/翻译已经取得了长足的进步，足以做到这一点，但我在让一切都发生时遇到了一些麻烦。现在，右侧和底部的菱形不会移动，左侧和顶部的菱形不会淡入，如果我修改浏览器的宽度，所有东西都会相互折叠。

我正在做的事情甚至可以使用 CSS3 吗？我听说此时最好尝试远离 jQuery，但老实说，我什至不是 100% 知道如何在 jQuery 中做到这一点。

这是我到目前为止所做的：

HTML：

<div id="all-diamonds">
   <div id="blue-diamond"></div>
   <div id="purple-diamond"></div>
   <div id="yellow-diamond"></div>
   <div id="red-diamond"></div>
 </div>

CSS：

/* Diamonds Animations */
@keyframes fade-in {
  from {opacity: 0;}
  to {opacity: 100;}
}

@keyframes center-from-left {
  0% {
     left: 0%;   
    }
  100% {
     left: 45%;    
   }
 }

@keyframes center-from-top {
  0% {
     top: 0%;
  }
  100% {
     top: 35%;
  }
}

@keyframes center-from-right {
  0% {
    right: 15%;    
  }
  100% {
   right: 38.6%;    
  }
}

@keyframes center-from-bottom {
  0% {
    bottom: 0%;
  }
  100% {
    bottom: 24%;
  }
}

钻石的 CSS：

/* Diamonds */
#blue-diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid blue;
position: absolute;
top: 46.5%;
left: 45%;
animation-name: fade-in;
animation-name: center-from-left;
animation-duration: 5s;
}
#blue-diamond:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid blue;
}


#purple-diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid purple;
position: absolute;
top: 35%;
left: 49.25%;
margin: auto;
animation-name: fade-in;
animation: center-from-top;
animation-duration: 5s;
}
#purple-diamond:after {
content: '';
position: absolute;
left: -50px; 
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid purple;  
}

#yellow-diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid yellow;
position: absolute;
top: 46.5%;
right: 38.6%;
animation-name: center-from-right;
animation-name: fade-in;
animation-duration: 5s;
}
#yellow-diamond:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid yellow;
}

 #red-diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: absolute;
bottom: 24%;
left: 49.25%;
animation-name: center-from-bottom;
animation-name: fade-in;
animation-duration: 5s;
}
#red-diamond:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;

}

JSFiddle Here.

非常感谢您的宝贵时间！

【问题讨论】：

标签： css animation css-transitions css-animations css-transforms

【解决方案1】：

您正在尝试为每个元素设置两个动画名称属性，最终用最后一个覆盖第一个元素。您可以做的是在每个@keyframe 内处理多个属性。此外，opacity 的范围是 0 - 1，您可以使用十进制值 - 例如0.7。试试这个例子：

@keyframes center-from-bottom {
    0% {opacity: 0; bottom: 0%;}
    100% {opacity: 1; bottom: 24%; }
}

为您的红色钻石，然后修复其余部分。不要忘记从#red-diamond 样式中删除animation-name: fade-in; 希望它有所帮助。

【讨论】：