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

课堂之动画的详细学习

时间:2016-08-15 22:11:36      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

今天学了动画,动画的功能真的很强大,如果有哪个不把麻烦的耐心,完全可以做个

动画片出来。

1、animation-name

元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义

div{
      -webkit-animation-name : FromLeftToRight;
      animation-name : FromLeftToRight;
}

2、 keyframes

被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。

@-webkit-keyframes FromLeftToRight{
    0%{left: 0; }
     100%{ left: 800px; }
}                     

@-webkit-keyframes FromLeftToRight{ 
    from {left: 0; }
    to {left: 800px; } 
}

@keyframes FromLeftToRight{ 0%{left: 0; } 100%{ left: 800px; } }

@keyframes FromLeftToRight{ from {left: 0; } to {left: 800px; } }

 

3、animation-duration

设置对象动画的持续时间

div{
      -webkit-animation-duration:1s;
                  animation-duration:1s
}

4、animation-timing-function

div{
      -webkit-animation-timing-function : ease-in;
                    animation-timing-function : ease-in;
}

5、animation-delay

设置对象动画的延迟时间

 

div{
      -webkit-animation-delay : 1s;
          animation-delay : ease-in;
}

6、 animation-iteration-count

设置对象动画的延迟时间

div{
      -webkit-animation-iteration-count : 2;
          animation-iteration-count : 2;
}

infinite表示无限次数

7、animation-direction

设置对象动画在循环中是否按照相反顺序执行

normal:正常方向

reverse:反方向运行

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

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

div{
      -webkit-animation-direction : normal;
          animation-direction : normal;
}

8、animation-play-state

running:运动 paused:暂停

div:hover{    
    -webkit-animation-play-state:paused;    
    animation-play-state:paused;
}

9、animation-fill-mode

设置对象动画时间之外的状态

none:默认值。不设置对象动画之外的状态

forwards:设置对象状态为动画结束时的状态

backwards:设置对象状态为动画开始时的状态

both:设置对象状态为动画结束或开始的状态

div {    
    -webkit-animation-fill-mode : both;    
                  animation-fill-mode : both;
}

10、animation

通过 animation ,我们能够创建自定义动画,这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript。

animation:[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] ||

[ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> ||

<single-animation-play-state> [ ,*]

多个可以逗号隔开;

div{
    -webkit-animation: FromLeftToRight  2s ease-out forwards;
                 animation: FromLeftToRight  2s ease-out forwards;     
}

 

小例子:

简单的纯css的轮播图,没有索引的点击。

效果图:

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播css</title>
    <style>
    body{
        margin: 0;
    }
    #container{
        margin: 50px auto 0;
        width: 160px;
        height: 110px;
        box-shadow: 1px 1px 3px 1px #888;
    }
    #wrap{
        width: 160px;
        height: 110px;
        background: url(images/1.jpg) no-repeat;
        animation: Carousel 20s infinite;
        opacity: 1;
    }
    #wrap:hover{
        animation-play-state:paused;
    }
    @keyframes Carousel{
        0%{background: url(images/1.jpg) no-repeat;opacity: 1;}
        4%{opacity: 1}
        8%{opacity:0.6;background: url(images/1.jpg) no-repeat;opacity: 1;}
        12%{opacity:0.2;background: url(images/2.jpg) no-repeat;}
        16%{opacity:0.6;background: url(images/2.jpg) no-repeat;}
        20%{opacity:1;background: url(images/2.jpg) no-repeat;}
        24%{opacity: 1}
        28%{opacity: 0.6;background: url(images/2.jpg) no-repeat;}
        32%{opacity:0.2;background: url(images/3.jpg) no-repeat;}
        36%{opacity:0.6;background: url(images/3.jpg) no-repeat;}
        40%{opacity:1;background: url(images/3.jpg) no-repeat;}
        44%{opacity: 1}
        48%{opacity: 0.6;background: url(images/3.jpg) no-repeat;}
        52%{opacity:0.2;background: url(images/4.jpg) no-repeat;}
        56%{opacity:0.6;background: url(images/4.jpg) no-repeat;}
        60%{opacity:1;background: url(images/4.jpg) no-repeat;}
        64%{opacity: 1}
        68%{opacity: 0.6;background: url(images/4.jpg) no-repeat;}
        72%{opacity:0.2;background: url(images/5.jpg) no-repeat;}
        76%{opacity:0.6;background: url(images/5.jpg) no-repeat;}
        80%{opacity:1;background: url(images/5.jpg) no-repeat;}
        84%{opacity: 1}
        88%{opacity: 0.6;background: url(images/5.jpg) no-repeat;}
        92%{opacity:0.2;background: url(images/1.jpg) no-repeat;}
        96%{opacity:0.6;background: url(images/1.jpg) no-repeat;}
        100%{opacity:1;background: url(images/1.jpg) no-repeat;}
    }
    
    </style>
</head>
<body>
    <div id="container">
        <div id="wrap">
        </div>
    </div>
</body>
</html>

不解释!

 

课堂之动画的详细学习

标签:

原文地址:http://www.cnblogs.com/zhangzhicheng/p/5774283.html

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