首页 > > 网页制作 > css >

transition和animation做动画（css动画二）

2018-06-24 01:02:27来源：未知阅读 ()

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

translate：平移；是transform的一个属性；
transform：变形；是一个静态属性，可以改变元素的形状或位置，做出2d或3d效果；
transition：过渡，转变；使css属性值在一段时间内平滑的变化，需要有触发条件（如hover等），是animation的简化版；
animation：动画；可以设置多帧效果，然后把它们组合变换，按动画效果展示出来；

1. transition

　　过渡，右有四个子属性：

transition-property：过渡属性，默认为all；
transition-duration：过渡效果花费的时间，默认值是0，以秒或毫秒计，不能为负值；
transition-timing-function：定义过渡效果的速度，默认值ease(开始和结束慢，中间快)，可以设置linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(和ease类似，开始和结束慢，但是中间更快)、贝塞尔曲线；
transition-delay：定义过渡延时时间；默认值为0（直接开始），以秒或毫秒计，可为负值；
transition的四个子属性可以缩写，用空格隔开；其中duration（过渡时间）和delay（延时时间）两个值都是时间，当两个值都存在时，第一个是duration（过渡时间），第二个是delay（延时时间）；如果只存在1个时间，那就是duration（过渡时间），delay（延时时间）默认为0；
transition可以同时设置多个属性的过渡效果，用逗号隔开；
transition需要有触发条件，animation则不需要；

　　建议看大神的这篇博文，讲的比较详细，里面还有关于API的东西；

　　想整个hover效果的，弄了好久，又是iframe（在jsrun.cn网站上做出效果，然后分享，自动生成iframe链接），又是js的，都没弄出来，好像是没有js权限，懒得整了，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .wrapper{
                margin: 100px;
                height: 300px;
                border: 10px solid #f0f;
                background: #0ff;
                position: relative;
                cursor: pointer;
            }
            .test{
                width: 100px;
                height: 100px;
                background: #f60;
                position: absolute;
                left: 30px;
                top: 30px;
                transition: width 1s ease-in-out 2s , 
                            height 2s ease-in ,
                            background 3s linear ,
                            left .5s ease-out , 
                            top 1.5s ease-in;
            }
            .wrapper:hover .test{
                width: 150px;
                height: 50px;
                background: #ff0;
                left: 200px;
                top: 150px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="test"></div>
        </div>
    </body>
</html>

View Code

2. animation

　　动画，一种样式到另一种样式的动画效果，可以改变任意多的次数任意多的样式，用百分比来规定发生的时间，或关键词"from"和"to"，等同于"0%"和"100%"；

先用@keyframes定义动画的名称，然后根据时间轴来写不同的动画效果；
在需要做动画效果的元素身上设置animation属性，并绑定动画名称，然后设置动画持续时间、时间函数、延时、播放次数、播放方向、播放状态、填充模式等；

　　2.1 @keyframes:

@keyframes，声明动画名称；时间轴的百分比顺序可以随便排列，最后浏览器都是从0%到100%按顺序解析，0%不可以省略百分号；
设置小于0%或者大于100%的百分比是无效的；
如果0%或100%没有写动画效果的属性，那么将应用元素默认的属性值；
如果多@个keyframes的名称相同，那么只有最后一个有效，如果最后一个@keyframes没有写任何属性，那么动画效果就是没有的（不管前面相同名称的@keyframes）

2.2 animation-duration

　　动画执行完成所需时间，默认为0（没有动画效果），不能为负值，否则将没有动画效果；

2.3 animation-timing-function

　　类似与transition的时间函数，默认值ease(开始和结束慢，中间快)，可以设置linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(和ease类似，开始和结束慢，但是中间更快)、贝塞尔曲线；

2.4 animation-delay

　　定义延时多长时间后开始播放动画；可以设置负值（从提前多少秒的位置开始播放动画）；

2.5 animation-interation-count

　　循环次数，默认值是1，可以设置整数或小数，不能是0以及负值，也可以设置关键词"infinite"（无限次数）；

2.6 animation-direction

　　默认值normal（正向），可设置reverse（反向）、alternate（在奇数次正向，偶数次反向；也就是说动画顺序是0%---100%---0%---100%---...）、alternate-reverse（在奇数次反向，偶数次正向，也就是说动画顺序是100%---0%---100%---0%---...）；

　　safari浏览器不支持alternate和alternate-revers属性；

2.7 animation-fill-mode

　　定义动画开始帧和结束帧的动作；默认值是none（动画结束后，回归到初始状态，不是0%，是元素本身属性）；

　　可设置forwards（元素停留在动画结束的状态，这个值并不一定是100%的位置，因为可能是反向播放，也可能播放次数是小数）；

　　可设置backwards（元素停留在动画开始的状态，这个值不一定是0%的位置，因为延迟开始的时间可能是负值）；

　　可设置both，意思是同时具有forwards和backwards的效果；

2.8 animation-play-state

　　设置动画运行（running）或者暂停（paused）;

　　建议看大神的这篇博文，讲的比较详细，里面还有关于API的东西；

　　六面体旋转：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>六面体动画</title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            li{
                list-style: none;
            }
            .wrapper{
                width: 600px;
                height: 600px;
                margin: 0 auto;
            }
            .demo-container{
                position: relative;
                width: 600px;
                height: 600px;
                perspective: 1800px;/*定义视距*/
            }
            @keyframes bigMove{
                0%{
                    transform: rotateX(-25deg)rotateY(-45deg);
                }
                20%{
                    transform: rotateX(-25deg)rotateY(135deg);
                }
                100%{
                    transform: rotateX(-25deg)rotateY(135deg);
                }
            }
            @keyframes smallMove{
                0%{
                    transform: rotateX(-25deg)rotateY(-45deg);
                }
                20%{
                    transform: rotateX(-25deg)rotateY(-405deg);
                }
                100%{
                    transform: rotateX(-25deg)rotateY(-405deg);
                }
            }

            .box{
                width: 300px;
                height: 300px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -150px;
                margin-top: -150px;
                transform: rotateX(-25deg)rotateY(-45deg);
                transform-style:preserve-3d;
                animation: bigMove 5s infinite ease-in-out 2s ;
            }
            .box li{
                width: 300px;
                height: 300px;
                box-shadow: 0 0 5px #98b5e0;
                text-align: center;
                font: 28px/300px "microsoft yahei";
                color: #fff;
                position: absolute;
                top: 0;
                left: 0;
                background: radial-gradient(circle, rgba(165,193,235,.5) 0%, rgba(134,167,218,.5) 50%  );
            }
            .box .front{
                transform: translateZ(150px);
            }
            .box .back{
                transform: translateZ(-150px)rotateY(180deg);
            }
            .box .left{
                transform: translateX(-150px)rotateY(-90deg);
            }
            .box .right{
                transform: translateX(150px)rotateY(90deg);
            }
            .box .top{
                transform: translateY(-150px)rotateX(90deg);
            }
            .box .bottom{
                transform: translateY(150px)rotateX(-90deg);
            }
            
            /*inner*/
            .inner{
                width: 100px;
                height: 100px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
                transform-style:preserve-3d;
                transform: rotateX(-25deg)rotateY(-45deg);
                animation: smallMove 5s infinite ease-in-out 2s ; 
            }
            .inner li{
                width: 100px;
                height: 100px;
                box-shadow: 0 0 2px #0b65ea;
                text-align: center;
                font: 28px/100px "microsoft yahei";
                color: #fff;
                position: absolute;
                top: 0;
                left: 0;
                background: radial-gradient(circle, rgba(84,153,218,.5) 0%, rgba(73,130,215,.5) 50%  );
            }
            .inner .front{
                transform: translateZ(50px);
            }
            .inner .back{
                transform: translateZ(-50px)rotateY(180deg);
            }
            .inner .left{
                transform: translateX(-50px)rotateY(-90deg);
            }
            .inner .right{
                transform: translateX(50px)rotateY(90deg);
            }
            .inner .top{
                transform: translateY(-50px)rotateX(90deg);
            }
            .inner .bottom{
                transform: translateY(50px)rotateX(-90deg);
            }
        </style>
    </head>
    <body>
            <div class="wrapper">
                <div class="demo-container">
                    <ul class="box">
                        <li class="front"></li>
                        <li class="back"></li>
                        <li class="left"></li>
                        <li class="right"></li>
                        <li class="top"></li>
                        <li class="bottom"></li>
                    </ul>
                    <ul class="inner">
                        <li class="front"></li>
                        <li class="back"></li>
                        <li class="left"></li>
                        <li class="right"></li>
                        <li class="top"></li>
                        <li class="bottom"></li>
                    </ul>
                </div>
            </div>
    </body>
</html>

View Code

　　球旋转：

　　代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="base.css"/>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            li{
                list-style: none;
            }
            body{
                background: #000;
            }
            .wrapper{
                width: 600px;
                height: 600px;
                margin: 0 auto;
                perspective: 1800px;
            }
            .demo-container{
                position: relative;
                width: 600px;
                height: 600px;
                overflow: hidden;
            }
            @keyframes boxXuanzhuan{
                0%{
                    transform: rotateX(50deg)rotateZ(170deg)rotateY(50deg);
                }
                30%{
                    transform: rotateY(50deg)rotateX(170deg)rotateZ(30deg);
                }
                60%{
                    transform: rotateZ(50deg)rotateY(170deg)rotateX(95deg);
                }
                100%{
                    transform: rotateX(50deg)rotateZ(170deg)rotateY(66deg);
                }
            }
            .box{
                width: 600px;
                height: 600px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -300px;
                margin-top: -300px;
                /*transition: all 3s;*/
                /*transform: rotateX(-134deg)rotateY(64deg);*/
                transform-style:preserve-3d;
                animation:boxXuanzhuan 30s infinite ease alternate;
            }
            @keyframes liXuanZhuan{
                0%{
                    background: #acf91a;
                    color: #00B700;
                    border-radius: 50%;
                    width: 50px;
                    height: 30px;
                    box-shadow: 0 0 10px #adff2f;
                }
                30%{
                    background: #f9641a;
                    color: #f71af9;
                    border-radius: 20%;
                    width: 60px;
                    height: 50px;
                    box-shadow: 0 0 10px #818217;
                }
                
                70%{
                    background: #6932bf;
                    color: #FFFFFF;
                    border-radius: 50%;
                    width: 50px;
                    height: 50px;
                    box-shadow: 0 0 10px #adff2f;
                }
                100%{
                    background: #acf91a;
                    color: #00B700;
                    border-radius: 10%;
                    width: 50px;
                    height: 30px;
                    box-shadow: 0 0 10px #adff2f;
                }
            }
            .box li{
                background: #00FF99;
                position: absolute;
                width: 60px;
                height: 60px;
                left: 50%;
                top: 50%;
                margin-left: -30px;
                margin-top: -30px;
                font: 22px/60px "microsoft yahei";
                color: #F08787;
                border-radius: 50%;
                text-align: center;
                animation:liXuanZhuan 20s infinite ease alternate;
            }
            .item1{
                transform: translateZ(250px);
            }
            .item2{
                transform: translateZ(-250px);
            }
            .item3{
                transform: rotateY(90deg)translateZ(250px);
            }
            .item4{
                transform: rotateY(-90deg)translateZ(250px);
            }
            .item5{
                transform: rotateY(45deg)translateZ(-250px);
            }
            .item6{
                transform: rotateY(-45deg)translateZ(-250px);
            }
            .item7{
                transform: rotateY(45deg)translateZ(250px);
            }
            .item8{
                transform: rotateY(-45deg)translateZ(250px);
            }
            .item9{
                transform: rotateY(-45deg)rotateX(45deg)translateZ(250px);
            }
            .item10{
                transform: rotateY(-135deg)rotateX(45deg)translateZ(250px);
            }
            .item11{
                transform: rotateY(45deg)rotateX(45deg)translateZ(250px);
            }
            .item12{
                transform: rotateY(135deg)rotateX(45deg)translateZ(250px);
            }
            .item13{
                transform: rotateY(-45deg)rotateX(-45deg)translateZ(250px);
            }
            .item14{
                transform: rotateY(-135deg)rotateX(-45deg)translateZ(250px);
            }
            .item15{
                transform: rotateY(45deg)rotateX(-45deg)translateZ(250px);
            }
            .item16{
                transform: rotateY(135deg)rotateX(-45deg)translateZ(250px);
            }
            .item17{
                transform: rotateX(90deg)translateZ(250px);
            }
            .item18{
                transform: rotateX(-90deg)translateZ(250px);
            }
            
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="demo-container">
                <ul class="box">
                    <li class="item1"></li>
                    <li class="item2"></li>
                    <li class="item3"></li>
                    <li class="item4"></li>
                    <li class="item5"></li>
                    <li class="item6"></li>
                    <li class="item7"></li>
                    <li class="item8"></li>
                    <li class="item9"></li>
                    <li class="item10"></li>
                    <li class="item11"></li>
                    <li class="item12"></li>
                    <li class="item13"></li>
                    <li class="item14"></li>
                    <li class="item15"></li>
                    <li class="item16"></li>
                    <li class="item17"></li>
                    <li class="item18"></li>
                </ul>
            </div>
        </div>
    </body>
</html>