transition和animation做动画(css动画二)

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

新老客户大回馈,云服务器低至5折

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

  • 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%";

  1. 先用@keyframes定义动画的名称,然后根据时间轴来写不同的动画效果;
  2. 在需要做动画效果的元素身上设置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>
View Code

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:bootstrap到底是用来做什么的(概念)

下一篇:iconfont字体图标和各种CSS小图标