码迷,mamicode.com
首页 > Web开发 > 详细

css3 使用animation实现动画效果

时间:2017-06-18 18:14:39      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:key   tran   top   ack   class   通过   mat   ram   latex   

  .rotation {
            -webkit-animation-name: rotation;
            -webkit-animation-duration: 30s;
            -moz-animation-name: rotation;
            -moz-animation-duration: 30s;
        }

#sun {
    background: url("http://img.mukewang.com/55ade004000106c202010201.png") no-repeat;
    position: absolute;
    z-index: 1;
    top: -30px;
    height: 201px;
    width: 201px;
    right: 40%;

}

  @-webkit-keyframes rotation {

        0% {
    transform: translateX(0) translateY(0);
        }
100% {
    transform: translateX(-2000px) translateY(400px);
}
            /*?*/
        }
        
        @-moz-keyframes rotation {
            /*?*/
            0% {
    transform: translateX(0) translateY(0);
}
100% {
    transform: translateX(-2000px) translateY(400px);
}
        }

  

animation-name:是动画帧的设置 通过关键字keyframes 进行设置
duration设置动画完成的时间
本例中有一个div ID sum 显示一个太阳落山的效果


css3 使用animation实现动画效果

标签:key   tran   top   ack   class   通过   mat   ram   latex   

原文地址:http://www.cnblogs.com/ProDoctor/p/7044763.html

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