CSS 动画之谜

一、transition
1、先看效果

渐变动画.gif

2、transition其实就是一个过渡效果，例如 transition: opacity 1s ease-in-out,transform 1s ease-in-out 0.1s; 其实对应的就是透明度、动画时间、动作效果（ease-in-out就是规定以慢速开始和结束的过渡效果，而 ease就是规定慢速开始，然后变快，然后慢速结束的过渡效果，而linear就是相同的速度没有加速度了），然后后面通过逗号隔开的是另一个效果transform,这时候发现transform动画最后还多了一个参数0.1s，这是说明延迟0.1s后执行，也就是说执行opacity0.1s后再执行transform
如果没有transform动画的话，效果就如同蓝色的原块突然的出现在在红色块内
3、代码

        .test_back{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
        }
        .test_back:hover div{
            opacity: 1;
            -webkit-transform:translate(0px, 0px);
            /* transition 其实就是过渡 先 opacity ，0.1s后是transform*/
            transition: opacity 1s ease-in-out,transform 1s ease-in-out 0.1s;
        }
        .test_inline{
            height: 80px;
            width: 80px;
            background-color: blue;
            border-radius: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out,transform 1s ease-in-out;
            -webkit-transform:translate(-50px, -50px);
        }

二、transform
1、先看效果

旋转.gif

2、上面的效果好像做的不是很好看，无所谓啦，先看这里我们用到了transform,使用transform，我们会用到它的一些属性，例如translate 位置变换、rotate 做旋转、scale 可以缩放、skew 操作变形、matrix 变幻矩阵.
下面代码中我们用到的transform-origin是变形原点，也就是变形或旋转所围绕的点，然后我们利用roate根据原点进行角度的旋转。

3、代码

      

          <"img class="test_block" src="../../image/111.jpeg" width="150" height="100">
          <"img class="test_block" src="../../image/111.jpeg" width="150" height="100">
          <"img class="test_block" src="../../image/111.jpeg" width="150" height="100">
      

       .test_back{
            width: 200px;
            height: 200px;
            text-align: center;
        }
        .test_block{
            position: absolute;
            transform-origin: center 400px;
            transition: transform .2s ease;
        }
        .test_back .test_block:first-child{
            transform: rotate(5deg);
        }
        .test_back .test_block:last-child{
            transform: rotate(-5deg);
        }
        .test_back:hover .test_block:first-child{
            transform: rotate(10deg);
        }
        .test_back:hover .test_block:last-child{
            transform: rotate(-10deg);
        }

三、animation

1、先看效果

放大.gif

2、animation 属性我们主要是用来做动画效果，基本的写法就是 animation: （绑定到keyframes的名称ID） （动画时长，要大于0） （动画的速度曲线，就是上面所说的linear、ease等） （动画开始之前延迟的时间） （动画持续的次数，例如infinite就是永久） （normal正向播放，alternate反向播放）;

3、看代码

          .test_animation{
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background-color: yellow;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            /*infinite 是永久，也可以定义次数，具体执行的动画由keyframes 决定*/
            -webkit-animation:fadeout 1.0s infinite ease-in-out;
            animation: fadeout 1.0s infinite ease-in-out;
        }
        @webkit-keyframes fadeout{
            from {-webkit-transform:scale(0.0);}
            to {-webkit-transform:scale(1.0);opacity: 0;}
        }
        @keyframes fadeout{
            from {transform: scale(0.0);}
            to {transform: scale(1.0);opacity: 0;}
        }

四、animation巧用border

1、先看效果

转圈.gif

2、 使用linear 才会比较顺畅，如果是ease每一圈会停顿这是因为ease的速度是控制低速开始，然后加速，然后在结束的时候减速

3、代码

        .test_animation{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);

            width: 100px;
            height: 100px;
            border-radius: 100%;
            border: 10px solid gray;
            border-left-color: WhiteSmoke;
            border-left-radius: 100%;

            /*  border颜色使用linear 才会比较顺畅，如果是ease每一圈会停顿   */
            -webkit-animation:load 1.1s infinite linear;
        }
        @webkit-keyframes load{
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }
        @keyframes load{
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }

五、animation巧用延时delay

1、先看效果

跳动.gif

2、animation-delay 定义动画何时开始, 默认0 为立即开始,正值为 延时指定时间后执行动画,负值为 立即执行，但是会跳过指定时间后进入动画.

3、

      .test_animation{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform:translate(-50%, -50%);
            
            width: 50px;
            height: 50px;
            text-align: center;
        }
        .test_animation > div{
            width: 6px;
            height: 100%;
            display: inline-block;
            background-color: red;
            -webkit-animation: strechdelay 1.2s infinite ease-in-out;
        }

        /*****************长短逐渐变换的效果，去掉则变成同调************************/
        .test_animation .test_line2{
            -webkit-animation-delay: -1.1s;
        }
        .test_animation .test_line3{
            -webkit-animation-delay: -1.0s;
        }
        .test_animation .test_line4{
            -webkit-animation-delay: -0.9s;
        }
        .test_animation .test_line5{
            -webkit-animation-delay: -0.8s;
        }
        /*****************长短逐渐变换的效果，去掉则变成同调************************/


        @-webkit-keyframes strechdelay{
            0%,40%,100%{
                -webkit-transform:scaleY(.4);
            }
            20%{
                -webkit-transform:scaleY(1.0);
            }
        }