css - 使用了animation后translate无效，chrome和firefox无效，IE可以

问题描述

问 题

div的width不固定，使用translate(-50%,-50%)减去自身width一半达到居中，只使用translate可以居中，加上animation后translate无效，有没有什么解决方法？谢谢

div的样式如下：

  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;


  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);     /* IE 9 */
  -moz-transform: translate(-50%,-50%);     /* Firefox */
  -webkit-transform: translate(-50%,-50%); /* Safari 和 Chrome */
  -o-transform: translate(-50%,-50%);     /* Opera */



  -webkit-animation: fadeInDown 1s .2s ease both;
  -moz-animation: fadeInDown 1s .2s ease both;

解决方案

@keyframes fadeInDown {
  0% {
    transform: translate(-50%, -20%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

不知道这样你试了没有

这篇关于css - 使用了animation后translate无效，chrome和firefox无效，IE可以的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！