@keyframes深层理解

@keyframes深层理解

@keyframes font1{
        0%{
            transform: translate(-50%,-50%) scale(0);
            /* 每个状态完成 都会恢复到默认状态 */
        }
         /* 0 到33% 为一阶段  33%到66%为第二阶段 */
        33%{
            transform: translate(-50%,-50%) scale(1.3) rotateZ(720deg) ;
            /* 翻译 改变状态: translate(-50%,-50%)
                             在33%阶段结束时
                             向左位移元素自身宽度50%
                             向上位移元素自身高度50% 

                             scale(1.3)
                             在33%阶段结束时
                             元素已经放大自身1.3倍

                             rotateZ(720deg)
                             在33%阶段结束时
                             元素已经围绕z轴顺时针旋转720度         
                             */
            /* 比如设置了rotateZ(1turn) 意思是在33%阶段结束时已经围绕Z
            轴转了一圈 围绕z周顺时针旋转 
            一旦完成该状态 元素就要在下一个状态的时候恢复到自己原来状态 
            也就是要逆时针旋转恢复到原来状态  前提是在下一个状态没有
            设置rotate*/
        }
        66%{
            transform: translate(-50%,-50%)  scale(0.5) rotateZ(2turn); 
            /* rotateZ(2turn) 在达到66%阶段结束时 元素已经围绕z轴顺时针
            旋转720度*/
            /* 由于在33%阶段结束时  元素已经围绕z轴顺时针旋转720度  
            ***因此他不会在进行转动***     */
            /* rotateZ(-1turn) 如果设为 -1turn 那么元素会先逆时针旋转2圈
            恢复到原来状态 然后 受rotateZ(-1turn)影响 再逆时针旋转一圈
             一共逆时针旋转3圈 再100%状态结束时 还会顺时针旋转一圈
             回到元素原本状态 */
        }
         100%{
            transform: translate(-50%,-50%) scale(1) ; 
        } 
        /* 元素始终想要到恢复原来状态 如果在上一阶段改变了某个属性值 
        那么在下一个阶段中不改变对应属性的属性值 那么元素就会随着时间 
        回到原来的样式 */

        }