Html CSS动画变换位置

我有一个名为

announcement

的div元素，我用CSS将其定位为：

#announcement{
  position: fixed;
  bottom:50px;
  width: 340px;
  height: 90px;
  left: 50%;
  transform:translate(-50%,0);
  z-index:3;
  font-family: Courier, monospace;
  font-size:15px;  
  font-weight:400;
  line-height:1.6;
}

查看此代码笔：

正文{
框大小：边框框
}
#公告{
位置：固定；
底部：50px；
宽度：340px；
高度：90px；
左：50%；
转换：转换（-50%，0）；
z指数：3；
字体系列：Courier、monospace；
字体大小：15px；
字体大小：400；
线高：1.6；
}
#公告-1{
宽度：100%；
身高：100%；
背景色：hsla（0,0%，7%，0.85）；
边界半径：45px；
颜色：#fff；
箱形阴影：0.5px 0 hsla（0,0%，7%，0.35）l
}
#公告-1-1{
浮动：左；
宽度：64px；
边缘顶端：13px；
左边距：15px；
}
#公告-1-1-1{
过渡：颜色0.2s缓进缓出，不透明度0.2s缓进缓出；
背景色：透明；
}
#公告-1-1-1-1{
宽度：64px；
高度：64px；
边界：0；
边界半径：50%；
}
#公告-1-2{
浮动：左；
边缘顶部：10px；
左边距：15px；
宽度：210px；
}
#公告-1-2 h4{
保证金：0；
填充：0；
字体大小：12px；
字体大小：粗体；
利润底部：3倍；
}
#公告-1-2页{
颜色：#999；
线高：1.1；
利润上限：3倍；
字体大小：12px；
保证金：0；
填充：0；
显示：块；
}
#公告-1-2-3{
位置：绝对位置；
底部：8px；
字体大小：12px；
}
#公告-1-2-3-1{
颜色：#fff
}
#公告-1-2-3-2{
字体系列：Courier、monospace；
字体大小：12px；
字体大小：400；
背景：无；
边界：0；
文字装饰：下划线；
颜色：#fff；
}
.run-animation.flipInX{
-webkit背面可见性：可见！重要；
背面可见性：可见！重要；
-webkit动画名称：flipInX 1s；
动画：flipInX 1s；
}
@关键帧flipInX{
从{
-webkit变换：透视（400px）旋转3d（1,0,0,90度）；
变换：透视（400px）旋转3d（1,0,0,90度）；
-webkit动画计时功能：轻松；
动画计时功能：轻松自如；
不透明度：0；
}
40% {
-webkit变换：透视（400px）旋转3d（1,0,0，-20度）；
变换：透视（400px）旋转3d（1,0,0，-20度）；
-webkit动画计时功能：轻松；
动画计时功能：轻松自如；
}
60% {
-webkit变换：透视（400px）旋转3d（1,0,0,10度）；
变换：透视（400px）旋转3d（1,0,0,10度）；
不透明度：1；
}
80% {
-webkit变换：透视（400px）旋转3d（1,0,0，-5度）；
变换：透视（400px）旋转3d（1,0,0，-5度）；
}
到{
-webkit转换：透视图（400px）；
变换：透视（400px）；
}
}

买这本书
令人敬畏的理由

解雇

您可以将

包装到另一个div，例如

<div id='announcement-wrapper'>
  <div id='announcement' class='run-animation flipInX'>
    ...
  </div>
</div>

买这本书
令人敬畏的理由

解雇

我不知道您为什么要使用translate，这就是为什么在完成flipInx后，它会将其位置转换为定义的位置，而不是删除该位置，然后按以下方式尝试

#announcement{
  position: fixed;
  bottom:50px;
  width: 340px;
  height: 90px;
  margin-left:40%;
 //transform:translate(40%,0); /*remove this*/
  ............
}

---

勾选此项：；您只需将“边距”设置为“自动”即可居中；并移除左侧，变换并定位感谢@Sharj。这使它居中，尽管它打破了

底部：50px

，这是一项要求。我已在问题中澄清这项规定