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

CSS之animation

时间:2016-08-16 13:16:23      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

animation-name:自定义动画名称;

keyframes:关键帧;

animation-iteration-count:动画执行次数;

div{

                   width: 300px;

                   height: 300px;

                   background-color: pink;

                   animation-name:fromLeftToRight;

                   animation-duration:2s;

                   animation-iteration-count:3;

         }

 

 

 

         @keyframes fromLeftToRight{

                   from{

                            margin-left: 10px;

                   }

                   to{

                            margin-left: 300px;

                   }

         }

 

animation-direction:normal | reverse | alternate | alternate-reverse;

normal:正常方向

reverse:反方向运行

alternate:动画先正常运行再反方向运行,并持续交替运行

alternate-reverse:动画先反运行再正方向运行,并持续交替运行

 

        div {

                width: 100px;

                height: 100px;

                background: #5CBE3E;

                margin: 5px;

                animation-name: fromLeftToRight;

                animation-duration: 3s;

                animation-iteration-count: infinite;

            }

           

           div{

                animation-direction: reverse;

            }

           

            .alternate {

                animation-direction: alternate;

            }

           

        div {

                animation-direction: alternate-reverse;

            }

           

            @keyframes fromLeftToRight {

                from {

                    margin-left: 0;

                }

                to {

                    margin-left: 300px;

                }

            }

 

 

CSS之animation

标签:

原文地址:http://www.cnblogs.com/612555lhk/p/5775956.html

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