Question

1.所以我的动画有一个标记进入页面中间然后消失，但是标志不会使用顶部向下到中间：50％并且留下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;
}

Answer 1

使用转换或边距

＆＃13;

@-webkit-keyframes brazil-animation{
80% {
    visibility: hidden;
    opacity: 0.6;
}
100% {
    top: 50vh;
    left: 50vw;
    transform: translate3d(-100px,-75px,0);
    /*margin: -75px 0 0 -100px;/*margin: height/2 0 0 width/2 but the animation will not be smooth*/
}
}

div.flag {
top:0;
left:0;
width : 200px;
height : 150px;
position: absolute;
background: red;
-webkit-animation: brazil-animation 5s both 3s linear;
}

＆＃13;

<div class=flag></div>

＆＃13;

Fullscreen demo

CSS3居中动画

1 个答案: