当前位置:Gxlcms > html代码 > css3动画延迟出现问题_html/css_WEB-ITnose

css3动画延迟出现问题_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:121人阅读

.jiage{overflow:hidden;width:72%; background:url(../images/bg_2.png); margin:0 auto; position:absolute; left:14%;top:140px; z-index:1;animation:myFirst 1.5s linear 2s;-webkit-animation:myFirst 1.5s linear 2s;-o-animation:myFirst 1.5s linear 2s; -moz-animation:myFirst 1.5s linear 2s;-ms-animation:myFirst 1.5s linear 2s; }
@keyframes myFirst
{
0%{ top:-170px;}
100%{ top:140px; }
}
@-webkit-keyframes myFirst
{
0%{ top:-170px;}
100%{ top:140px;}
}

我想在页面加载后2s让这个动画播放,但是初始位置定在top:140px; 这样动画前两秒会出现在页面中,2s后执行从-170-140这个动作,怎么能让他前2s不出现,2s后执行动画


回复讨论(解决方案)

用js来控制,2s过后,给该元素添加动画这部分的css

用js来控制,2s过后,给该元素添加动画这部分的css



用setInterval()这个来控制前面停顿的2s吗


用js来控制,2s过后,给该元素添加动画这部分的css



用setInterval()这个来控制前面停顿的2s吗


这个方法会多次调用,意思是2s会执行一次你所写的方法,如果你只想执行一次就用setTimeout()。
ps:你首先要写一个方法,你这方法可以向你想要有动画的那个元素添加动画这段css。



用js来控制,2s过后,给该元素添加动画这部分的css



用setInterval()这个来控制前面停顿的2s吗


这个方法会多次调用,意思是2s会执行一次你所写的方法,如果你只想执行一次就用setTimeout()。
ps:你首先要写一个方法,你这方法可以向你想要有动画的那个元素添加动画这段css。


我要在页面加载2s后添加类,有页面加载这个事件吗

window.onload=function(){} //页面加载完成,自动执行该函数

用 jquery 做动画多好,css3的动画不是很灵活,兼容性也是不好

还是用jq做动画吧。。。

animation有动画延迟的属性
animation-delay:2s;
-webkit-animation-delay:2s;

.jiage{overflow:hidden;width:72%; background:url(../images/bg_2.png); margin:0 auto; position:absolute; left:14%;top:-170px; z-index:1;animation:myFirst 1.5s linear 2s forwards } @keyframes myFirst { 0%{ top:-170px;} 100%{ top:140px; } }

人气教程排行