CSS动画总结

七、CSS动画

1、过渡

• transition：过渡，通过过渡可以指定一个属性发生变化时的切换方式。通过过渡可以创建一些非常好的效果，提升用户体验。

• transition-property: 指定要执行过渡的属性,多个属性之间用 ，隔开。如果所有属性都需要过渡，则使用all关键字。大部分属性都支持过渡，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡

• transition-duration: 指定过渡效果的持续时间，时间单位 s 和 ms，1s=1000ms

• transition-timing-function: 过渡时序函数，指定过渡的执行方式。可选值：
  ease:默认值，慢速开始，先加速，再减速
  linear:匀速运动
  ease-in:加速运动
  ease-out:加速运动
  ease-in-out:先加速后减速
  cubic-bezier():贝赛尔曲线，指定时序函数，通过https://cubic-bezier.com可自动生成。
  steps():分步执行过渡效果，可以为其设置两个值。
  第一个值为整数，表示步数
  第二个值
  start:在时间开始时执行过渡
  end：在时间结束时执行过渡

• transition-delay:过渡效果的延迟，等待一段时间后再执行过渡

注意：
使用transition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则第一个时间表示过渡时间，第二个时间表示延迟时间。

       .box1{
            width: 800px;  height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;  height: 100px;
            margin-bottom: 100px;
            margin-left: 700px;
        }
        .box2{
            background-color: #bfa;
            transition: all 0.5s;
            transition-property: all;
            transition-duration: 2s;
            transition-timing-function: steps(3,end);
            transition-delay: 2s;
        }
        .box3{
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }
        .box1:hover div{
            margin-left: 0px;
        }
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

过渡.gif

2、动画

动画和过渡类似，都是可以实现一些动态的效果。不同的是过渡需要在某个属性发生变化时才能触发，动画可以自动出发动态效果。设置动画效果，必须使用@keyframes设置一个关键帧，关键帧设置了动画执行的每一个步骤

        @keyframes test{
            /* from表示动画的开始位置 */
            from{
                margin: 0;
                background-color: darkkhaki;
            }
            /* to表示动画的结束位置 */
            to{
                margin-left: 700px;
                background-color: darkorange;
            }
        }

可以为@keyframes添加断点使得从from到to分为多个阶段执行

        @keyframes falling{
            from{
                margin-top: 0;
            }
            50%{
                margin-top: 100px;
            }
            75%{
                margin-top: 200px;
            }
            to{
                margin-top: 300px;
            }
        }

• animation-name：要对当前元素生效的关键帧的名字

• animation-duration：动画的执行时间

• 同样可以为动画设置延时和贝赛尔曲线

  animation-delay: 2s;
  animation-timing-function: steps();
  

• animation-iteration-count：动画执行次数，可选值：整数、infinite无限次

• animation-direction：指定动画运行的方向，可选值：
  normal:默认值，每次都从from到to运行
  reverse:每次从to到from运行
  alternate:从from向to运行，重复执行动画反向执行
  alternate-reverse:从to向from运行重复执行动画时反向执行

• animation-play-state：设置动画的执行状态，可选值：
  running默认值，动画执行
  paused动画暂停
  此属性可结合hover一起使用

• animation-fill-mode：动画的填充模式，可选值：
  none默认值，动画执行完毕元素回到原来的位置
  forwards动画执行完毕元素会停止在动画结束的位置
  backwards动画等待延时时，元素就处于开始状态，即满足开始状态的所有属性
  both结合了forwards和backwards的属性，即等待时处于开始状态，结束时停在结束位置

        .box1{
            width: 800px; height: 800px;
            background-color: darkgrey;
        }
        .box1 div{
            width: 100px; height: 100px;
            margin-bottom: 100px;
            margin-left: 0;
        }
        .box2{
            background-color: #bbffaa;
            animation-name: test;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-iteration-count: 1;
            animation-direction: alternate;
            animation-play-state: running;
            animation-fill-mode: both;
        }
        @keyframes test{
            from{
                margin: 0;
                background-color: darkkhaki;
            }
            to{
                margin-left: 700px;
                background-color: darkorange;
            }
        }
    <div class="box1">
        <div class="box2">
        </div>
    </div>

动画.gif

3、变形

变形是指通过css来改变元素的形状或位置，不会影响到页面的布局。使用transform用来设置元素的变形效果。

（1）平移

translateX()沿着x轴方向平移
translateY()沿着y轴反向平移
translateZ()沿着z轴反向平移

平移元素时
向上为负值，向下为正值
向左为负值，向右为正值
向前为正值，向后为负值

若写百分数表示相对于元素自身大小的百分比移动

.box4:hover{
  transform: translateY(-5px);
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
<div class="box4"></div>

变形.gif

z轴平移，调整元素在z轴的位置，正常情况是调整元素和人眼之间的距离。距离越大，元素离人越近。z轴平移属于立体效果（近大远小）默认情况下网页不支持透视，如果需要看见效果，必须要设置网页的视距。
使用perspective属性来设置网页的视距，一般设置为800px到1200px之间。

        html{
            perspective: 800px;
        }
        body{
            height: 500px; width: 500px;
            margin: 0 auto; border: 1px solid red;
        }
        .box1{
            width: 200px; height: 200px;
            background-color: #bbffaa;
            margin: 150px auto;
            transition: 0.3s;
        }
        body:hover .box1{
            transform: translateZ(100px);
        }
<div class="box1"></div>

Z轴平移.gif

（2）旋转

通过旋转可以使元素沿着x，y，z轴旋转指定的角度：rotateX()，rotateY()，rotateZ()
可选值：度数：rotateX(45deg)，圈数：rotateY(.25turn)。

使用backface-visibility属性来设置是否显示元素背面。可选值：
visible默认值，显示背面
hidden不显示背面

        html{
            perspective: 800px;
        }
        .box{
            width: 600px; height: 250px;
            margin: auto; border: 1px solid red;
        }
        .box1{
            width: 552px; height: 212px;
            background-image: url(./img/1.gif);
            margin: auto;
            transition: 1s;
        }
        .box:hover .box1{
            transform: translateZ(100px) rotateY(180deg);
            backface-visibility: visible;
        }
    <div class="box">
        <div class="box1"></div>
    </div>

旋转.gif

（3）缩放

变形原点默认是中点，也可以指定原点的位置

对元素进行缩放的函数
scaleX()水平方向缩放
scaleY()垂直方向缩放
scale()双方向缩放

通过这个属性可以为图片设置鼠标移入放大效果

        .box1{
            width: 100px;height: 100px;
            background-color: #bbffaa;
            margin: 100px auto;
            transition: 1s;
            transform-origin: 0 0;
        }
        .box1:hover{
            transform: scale(2);
        }
<div class="box1"></div>

缩放.gif