CSS3定心动画

1.因此，我的动画中有一个标志进入页面中间，然后消失，但该标志不会使用top:50%和left 50%进入中间，我希望无论浏览器大小，它都会进入中间

    @-webkit-keyframes brazil-animation
{
0%
{
    width : 200px;
    height : 150px;
    top : 0px;
    left : 0px;
}
80% {
    width: 200px;
    height: 150px;
    visibility: hidden;
    opacity: 0.6;
}
100% {
    width: 200px;
    height: 150px;
    top: 50%;
    left: 50%;
    visibility: hidden;
}
}

div.brazil,#brazil {
position: absolute;

-webkit-animation: brazil-animation 5s both 1s linear;
-moz-animation: brazil-animation 5s both 1s linear;
-ms-animation: brazil-animation 5s both 1s linear;
-o-animation: brazil-animation 5s both 1s linear;
animation: brazil-animation 5s both 1s linear;
-webkit-animation-delay: 3s;
}

---

使用变换或边距

@-webkit为巴西动画设置关键帧{ 80% { 可见性：隐藏； 不透明度：0.6； } 100% { 顶部：50vh； 左：50vw； 转换：translate3d-100px，-75px，0； /*边距：-75px 0-100px；/*边距：高度/2 0 0宽度/2，但动画将不平滑*/ } } 分区旗{ 排名：0； 左：0； 宽度：200px； 高度：150像素； 位置：绝对位置； 背景：红色； -webkit动画：巴西动画5s均为3s线性； }