页面加载时的div动画

时间:2024-01-03 17:57:44

用@keyframes(动画),实现页面加载时的div动画(不要用js控制,因为当页面加载的时候,js还不一定可以使用)

可以在https://daneden.github.io/animate.css/参考所需要的动画效果

       div{
opacity:;
}
@keyframes fadeInLeft {
from {
opacity:;
transform: translate3d(-100%, 0, 0);
} to {
opacity:;
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes fadeInLeft {
from {
opacity:;
transform: translate3d(-10%, 0, 0);
} to {
opacity:;
transform: translate3d(0, 0, 0);
}
} .fadeInLeft {
animation: fadeInLeft .3s forwards;
}
<div class="fadeInLeft">kkdkkdkdkkdkdkkdk</div>