@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) ;
}
/* 元素始终想要到恢复原来状态 如果在上一阶段改变了某个属性值
那么在下一个阶段中不改变对应属性的属性值 那么元素就会随着时间
回到原来的样式 */
}