Question

我正在建立一个网站，我添加了一个CSS关键帧动画，通过链接点击（连接到javascript函数）调用。

这是我的CSS文件：

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login_regi);

        // On click signup textView => Open activity (register.xml)
        signUp = (TextView)findViewById(R.id.tvSignUp);
        signUp.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v){
                Intent openRegister = new Intent(LoginRegi.this,Register.class);
                startActivity(openRegister);
            }
        });

    }

我正在javascript函数中启动动画，如下所示：

#banner {
background-color: #00BBD2;
position: absolute;
width: 100%;
height: 100%;
animation-duration: 1s;
animation-name: resizeBanner;
animation-fill-mode: forwards;
animation-play-state: paused;
}

@keyframes resizeBanner {
from {height: 100%; background-color: #00BBD2}
to {height: 30%; background-color: #009688;}
}

动画在某些浏览器中运行完美，而在其他浏览器中 - 它根本不运行。 这怎么可能？

然而，我在关键帧动画之后运行的Jquery动画始终会运行。这样称呼：

<script>
    function animate()
    {
        document.getElementById('banner').style.webkitAnimationPlayState = "running";
    }
</script>

Answer 1

检查它：

x="0"

CSS关键帧动画在某些浏览器中不运行

1 个答案: