动画的位移.旋转.呈现等8.7

过渡延迟:

•  transition: height 2s 2s, width 2s 3s ;
• 多个属性之间用逗号隔开,第二个值代表的是过渡延迟;  

注意:行内元素添加转换无效;

注意:加了转换的盒子层级会提高,很像加了相对定位;

注意:绝对定位的盒子父元素有了转换,盒子偏移参考父元素;

空间位移:

•   perspective: 1000px;

• 视距:是屏幕距眼睛的距离,添加到父元素上,取值800-1200px;
•  transform: rotateX(100px);

•  有X,Y,Z三个值表示,用大写表示;

•  总写: transform: translate3d(X,Y,Z,60deg),调用哪个就把轴写成1,然后后边写数值  ;

立体呈现:

• 给父元素添加:  ransform-style: preserve-3d;

百分比动画:

 @keyframes tf {
            /* 百分比动画,复杂动画(多状态动画),百分比分配时间*/
            0% {
                transform: translate(0, 0);
            }

            5% {
                transform: translate(500px, 0);
            }

            50% {
                transform: translate(500px, 200px);
            }

            75% {
                transform: translate(0, 200px);
            }

            100% {
                transform: translate(0, 0);
            }

 体验动画:

• .box {
              width: 200px;
              height: 200px;
              background-color: #ccc;
              border-radius: 50%;
              /* 属性值,播放时长,循环播放 */
              /* animation: tf 2s infinite; */
              /*  调用动画的名称*/
              animation-name: tf;
              /* 动画执行的时间 */
              animation-duration: 2s;
              /* 动画播放的次数 默认一次 */
              /* animation-iteration-count:infinite ; */
              /* 动画执行的方向 alternate逆播 */
              animation-direction: alternate;
              /*  动画延迟 要多久才开始*/
              animation-delay: 2s;
              /* 动画速度曲线 linear匀速*/
              animation-timing-function: linear;
              /* 动画停在那个状态  forwards停在结束状态*/
              animation-fill-mode: forwards;
              /* infinite循环播放和forwards停在结束状态有冲突,连写的时候写一个就可以*/
              /* 第一个时间是动画播放的时间,第二个是延迟的时间 */
              animation:tf 2s alternate 2s linear infinite forwards ;
          }