码迷,mamicode.com
首页 > 其他好文 > 详细

页面加载时的div动画

时间:2018-02-02 16:09:42      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:ima   href   pre   ade   100%   git   color   span   orm   

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

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

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

 

页面加载时的div动画

标签:ima   href   pre   ade   100%   git   color   span   orm   

原文地址:https://www.cnblogs.com/rachelch/p/8405579.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!