使用animate.css时有的类型动画一开始不隐藏?
高洛峰
高洛峰 2016-11-19 13:17:00
0
3
1329

使用animate.css做h5宣传页,发现有的类名(比如shake,taba等)属性一开始是不隐藏的,
只有那些类命中带IN的,一开始是从隐藏到出现。
我的方法时把那个类名重写一遍給0% 加opacity:0,100%时 opacity:1

@-webkit-keyframes tada {
    0% { 
        opacity:0; //自己加的
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

但感觉这样比较麻烦,有没有更好的方法?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆(3)
学霸

以前也想过,就是加一个统一类名visibility: hidden一发就好了,然后动画执行的时候设置回来.

三叔

以前做h5宣传页也遇到这个问题
使用CSS3 animation-fill-mode 属性可以解决

wKiom1guzoqRzi9yAABydag783E719.jpg

动画开始前停留在第一帧位置,动画结束后停留在最后一帧位置。

学霸

打个补丁,给你的所有想一开始就隐藏起来的元素加下面两个类。

-

你也可以写一起,只加一个类名。

.hide {
    opacity:0;
}

.forwards {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}


熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!